<template>
    <div class="staff">
        <div class="card" v-for="(item, index) in mockData" :key="item.code">
            <div class="top" @click="change(item, index)">
                <div class="left">
                    <div class="icon"></div>
                    <div class="place">{{ item.placeName }}</div>
                </div>
                <div class="right">
                    <img v-if="item.state === 1" src="./img/down_icon.png" alt="" />
                    <img v-if="item.state === 2" src="./img/up_icon.png" alt="" />
                </div>
            </div>
            <div class="address">
                <div class="dizhi">场所地址</div>
                <div class="addressDetail">{{ item.detailAddress }}</div>
            </div>
            <div class="user" v-if="item.state == 2">
                <div class="add">
                    <van-button class="button" @click="addUser(item)">新增</van-button>
                </div>
                <div class="userDetail" v-for="(el, i) in item.userList" :key="i">
                    <div class="left">
                        <div class="name">{{ el.name }}</div>
                        <div class="mobile">{{ el.mobile }}</div>
                    </div>
                    <div class="delUser" @click="delUser(el)">
                        <img src="./img/del_icon.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <van-popup v-model="show" position="top" round>
            <div class="title">新增员工</div>
            <van-cell-group>
                <van-field v-model="form.name" name="姓名" label="姓名" clearable required placeholder="输入您的姓名">
                </van-field>
                <van-field v-model="form.mobile" name="手机号码" label="手机号码" clearable required placeholder="输入您的手机号码">
                </van-field>
                <van-field v-model="form.idCard" name="证件号码" label="证件号码" clearable required placeholder="输入您的证件号码">
                </van-field>
            </van-cell-group>
            <div class="shouquan">
                <van-button class="warrant" @click="warrant">授权</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import {
    queryListEnterprisePermitCode,
    queryListAuthUser,
    addAuthUser,
    delAuthUser
} from "@/api/reverse.js";
import Vue from "vue";
import { Button, Popup, CellGroup, Field, Dialog } from "vant";
Vue.use(Button).use(Popup).use(CellGroup).use(Field).use(Dialog);

export default {
    data() {
        return {
            mockData: [],
            qiyeData: {},
            userInfo: {},
            show: false,
            form: {
                name: "",
                mobile: "",
                idCard: "",
                permitCode: "",
                enterpriseCode: "",
                code: "",
                cardType: 0
            },
        };
    },
    methods: {
        init() {
            queryListEnterprisePermitCode({
                uid: this.userInfo.userId,
            }).then((res) => {
                // alert(JSON.stringify(res))
                if (res.code == 200) {
                    this.qiyeData = res.data;
                    if (res.data.permitCodeVOS.length > 0) {
                        this.mockData = res.data.permitCodeVOS.map((item) => {
                            item.state = 1;
                            return item;
                        });
                    }
                    console.log(this.mockData);    
                }
            }).catch(() => {
                this.$dialog.confirm({
                    message: "企业权限正在申请中，请耐心等待",
                    showCancelButton: false,
                }).then(() => {
                    this.$router.go(-1)
                })
            });
        },
        change(item, index) {
            if (item.state == 1) {
                queryListAuthUser({ code: item.code }).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        if (res.data && res.data.length > 0) {
                            item.userList = res.data;
                        }
                        this.$set(this.mockData, index, Object.assign(item, { state: 2 }));    
                    }
                });
            } else {
                this.$set(this.mockData, index, { ...item, state: 1 });
            }
        },
        addUser(item) {
            console.log(item);
            this.show = true;
            this.form.permitCode = item.code
            this.form.enterpriseCode = this.qiyeData.socialCreditCode
            this.form.code = this.qiyeData.code
            this.form.cardType = 0
        },
        warrant() {
            if (!this.form.name) {
                return this.$toast('请填写姓名')
            }
            if (!this.form.idCard) {
                return this.$toast('请填写身份证号')
            }
            if (
                !/(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(
                    this.form.idCard
                )
            ) {
                return this.$toast('请输入正确的身份证号码')
            }
            if (!this.form.mobile) {
                return this.$toast('请填写手机号码')
            }
            if (!/^1[3456789]\d{9}$/.test(this.form.mobile)) {
                return this.$toast('请输入正确的手机号码')
            }
            console.log(this.form)
            addAuthUser(this.form).then((res) => {
                if (res.code == 200) {
                    this.form = {}
                    this.$toast.success(res.data || res.msg || '员工授权成功')
                    this.init()
                }
                this.show = false;
            }).catch((err) => {
                    this.$toast.fail(err.message)
            })
        },
        delUser(el) {
            console.log(el);
            Dialog.confirm({
                title: '删除授权用户',
                message: '确认删除该授权用户吗？',
            })
                .then(() => {
                    delAuthUser({ code: el.code }).then((res) => {
                        this.$toast.success(res.data || res.msg || '授权用户删除成功')
                        this.init()
                    })
                })
                .catch(() => {
                    // on cancel
                });
        },
        // 初始化获取userInfo
        JSBgetUserInfo() {
            if (window.android !== undefined) {
                const res = window.android.getUserInfo(); // 这是一个json字符串
                sessionStorage.setItem("ZJCD-UserInfo", res);
                this.userInfo = JSON.parse(res);
            } else if (window.webkit) {
                window.webkit &&
                    window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
            } else {
                window.receiveLocation(
                    JSON.stringify({ code: 0, data: { lat: 39.983744, lng: 116.276063 } })
                );
                this.$toast("请先登录镇合意app");
            }
        },
        getUserInfo(res) {
            sessionStorage.setItem("ZJCD-UserInfo", res);
            this.userInfo = JSON.parse(res);
        },
    },
    created() {
        this.JSBgetUserInfo();
        this.init();
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;
    },
};
</script>

<style lang="stylus" scoped>
.staff {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  height: 100%;

  .title {
    width: 100%;
    height: 88px;
    background: #EB4E3F;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
    text-align: center;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 88px;
    text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
  }

  .shouquan {
    margin: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center;

    .warrant {
      width: 70%;
      height: 70px;
      background: linear-gradient(311deg, #EB4E3F 0%, #FF8138 100%);
      box-shadow: 0px 15px 18px -2px rgba(235, 78, 63, 0.2);
      border-radius: 35px;
      color: #fff;
      font-size: 32px;
    }
  }

  .card {
    width: 95%;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);

    .top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      box-sizing: border-box;

      .left {
        display: flex;
        align-items: center;

        .icon {
          width: 4px;
          height: 24px;
          background: #EB4E3F;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
          border-radius: 2px;
        }

        .place {
          margin-left: 20px;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          text-shadow: 0px 2px 0px 2px rgba(0, 0, 0, 0.06);
        }
      }

      .right {
        width: 60px;
        height: 60px;
        line-height: 60px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .address {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.06);

      .dizhi {
        margin: 15px 0;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .addressDetail {
        margin-left: 15px;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }

    .user {
      width: 100%;
      background: #F6F6F8;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
      border-radius: 0px 0px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .add {
        width: 80%;

        .button {
          width: 100%;
          margin: 30px 0;
          height: 80px;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
          border-radius: 49px;
          border: 1px solid #EB4E3F;
          color: #EB4E3F;
        }
      }

      .userDetail {
        width: 85%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .left {
          display: flex;
          align-items: center;
          font-size: 26px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
          .name{
              width 120px;
          }
        }

        .delUser {
          width: 60px;
          height: 60px;
          line-height: 60px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>