<template>
  <div class="village-qr-code">
    <div class="qr-code">
      <u-dropdown>
        <u-dropdown-item v-model="value" title="向杲村" :options="list"></u-dropdown-item>
      </u-dropdown>
      <img class="code" src="https://www.meihuama.com/resource/image/thumbnail/default.png" alt="">
      <strong class="send" @send="handleSendMsg">点击发送乡村群二维码</strong>
    </div>
    <div class="list">
      <div class="title">联村政干</div>
      <div class="body">
        <u-row class="wrap" v-for="item in 7" :key="item">
          <u-avatar src="http://n.sinaimg.cn/translate/w402h363/20180213/bg7r-fyrpeie1413753.jpg" size="112"
                    mode="square"></u-avatar>
          <div class="info">
            <u-row>
              <strong class="name">陶瑞武</strong>
              <span>组长 15888888888</span>
            </u-row>
            <u-gap height="12"></u-gap>
            <u-row>
              <label class="status">在岗</label>
              <span>上街组、建新组、后接组</span>
            </u-row>
          </div>
        </u-row>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "villageQRCode",
  data() {
    return {
      value: 1,
      list: [{
        label: '默认排序',
        value: 1,
      },
        {
          label: '距离优先',
          value: 2,
        },
        {
          label: '价格优先',
          value: 3,
        }
      ],
    }
  },
  methods: {
    ...mapActions(['wxInvoke', 'injectJWeixin']),
    handleSendMsg() {
      this.wxInvoke(['sendChatMessage', {
        msgtype: "image",
        image: {
          mediaid: ""
        }
      }, res => {
        if (res?.err_msg == 'sendChatMessage:ok') {

        }
      }])
    }
  },
  created() {
    this.injectJWeixin("sendChatMessage")
  }
}
</script>

<style lang="scss" scoped>
.village-qr-code {
  min-height: 100%;
  background-color: #F5F5F5;

  .qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    box-sizing: border-box;

    .code {
      width: 320px;
      height: 320px;
      margin-top: 32px;
    }

    .send {
      font-size: 28px;
      font-weight: 400;
      color: #1365DD;
      margin: 36px 0 50px;
    }
  }

  .list {
    background-color: #ffffff;
    margin-top: 16px;

    .title {
      height: 96px;
      font-size: 32px;
      font-weight: 600;
      color: #333333;
      display: flex;
      align-items: center;
      padding-left: 32px;
    }

    .body {
      box-sizing: border-box;
      padding-left: 32px;

      .wrap {
        height: 176px;

        .info {
          width: calc(100% - 32px - 112px);
          height: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 24px;
          justify-content: center;
          border-bottom: 1px solid #E5E5E5;

          .name {
            font-size: 36px;
            color: #333333;
            margin-right: 16px;
          }

          & > span {
            font-size: 28px;
            font-weight: 400;
            color: #999999;
          }

          .status {
            margin-right: 16px;
            font-size: 28px;
            font-weight: 400;
            color: #2EA222;
          }
        }
      }
    }
  }

  ::v-deep .u-dropdown__menu__item {
    margin-top: 48px;
  }

  ::v-deep .u-dropdown__content__mask {
    min-height: 100%;
  }

  ::v-deep .u-dropdown__menu__item__text {
    & > span {
      font-size: 36px;
      font-weight: 600;
      color: #333333;
    }
  }
}
</style>
