<!--
 * @Author: your name
 * @Date: 2021-01-30 11:18:29
 * @LastEditTime: 2023-02-20 11:00:58
 * @LastEditors: ckycjwds 1240973496@qq.com
 * @Description: In User Settings Edit
 * @FilePath: \aiguo_erp_vue\src\components\Dialog\addbrand.vue
-->
<template>
  <div class="bodydialog">
    <el-dialog
      :title="Obj.DialogTitle"
      :visible.sync="dialogVisible"
      width="52%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <!--      :close-on-click-modal="false"-->
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="ruleForm"
        label-width="100px"
        :rules="rules"
        size="small"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col v-for="(item, index) in Input" :key="index" :span="item.span">
            <el-form-item
              v-if="item.show "
              :prop="item.prop"
              :label="item.label"
            >
              <div style="display: flex;width: 100%;">
                <div v-if="item.label == '部门'" style="width: 100%;">
                  <!-- <cascader
                  :changeOnSelect="true"
                  canSearch
                  v-model="ruleForm[item.enName]"
                  expandType="hover"
                  :options="item.options"
                  :popperProps="popperProps"
                ></cascader> -->
                  <el-cascader
                    v-model="ruleForm[item.enName]"
                    clearable
                    :props="{ checkStrictly: true }"
                    :options="item.options"
                  />
                </div>
                <el-input v-else-if="item.label == '基本薪资' || item.label == '登录时长'" v-model="ruleForm[item.enName]" size="mini" :placeholder="item.placeholder" @input="ruleForm[item.enName] = AmountInput(ruleForm[item.enName])">
                  <span v-if="!!item.append" slot="append">{{ item.append }}</span>
                </el-input>
                <div v-else-if="item.label == '状态'" style="width: 100%;">
                  <el-radio-group v-model="ruleForm[item.enName]">
                    <el-radio :label="0">正常</el-radio>
                    <el-radio :label="1">非正常</el-radio>
                  </el-radio-group>
                </div>
                <div v-else-if="item.label == '小程序'" style="width: 100%;">
                  <el-radio-group v-model="ruleForm[item.enName]">
                    <el-radio :label="0">允许</el-radio>
                    <el-radio :label="1">不允许</el-radio>
                  </el-radio-group>
                </div>
                <div v-else-if="item.label == '微信绑定'" style="width: 100%;">
                  <el-popover
                    v-if="!ruleForm['openid']"
                    v-model="popshow"
                    placement="top"
                    title=""
                    width="260"
                    trigger="click"
                    @hide="hide()"
                  >
                    <el-image src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/erp_img/logo.png" />
                    <div class="center qrcode">
                      <el-image style="height:200px;width:200px;" :src="imgurl">
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </div>
                    <div slot="reference" style="color:#005bf5;cursor: pointer;" @click="bind()">
                      <i class="iconfont iconbangding4" style="margin-right:10px" />
                      <span>绑定微信</span>
                    </div>
                  </el-popover>
                  <span v-else style="color:green">扫码成功</span>
                </div>
                <div
                  :is="item.type"
                  v-else
                  v-model="ruleForm[item.enName]"
                  :placeholder="item.placeholder"
                  :value="item.value"
                  :style="item.width"
                  :format="item.format"
                  :type="item.TimeType"
                  :value-format="item.valueformat"
                  :clearable="true"
                  :filterable="item.filterable"
                  :disabled="item.disabled"
                  :allow-create="item.allowcreate"
                  :default-first-option="item.defaultfirstoption"
                  :multiple="item.multiple"
                  :props="item.props"
                  :name="item.name"
                  :show-password="item.showpassword"
                  @change="change(item.enName, ruleForm[item.enName], Obj.DialogTitle)"
                  @input="input($event)"
                  @focus="(v) => focus(ruleForm, item)"
                >
                  <el-option
                    v-for="items in item.options"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  />
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="resetForm()">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('ruleForm', Obj.Button, Obj.DialogTitle)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { qrcode, wx_unbinding } from '@/api/qrcode'
import QRCode from 'qrcodejs2' // 引入qrcode

export default {
  name: 'AddStaff',
  components: {
    QRCode
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    Obj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    Input: {
      type: Array,
      default: () => {
        return []
      }
    },
    ruleForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      popperProps: {
        place: 'bottom-start',
        positionFixed: true
      },
      imgurl: '',
      timer: 0,
      popshow: false
    }
  },
  watch: {
    ruleForm: {
      handler() {
        console.log(this.ruleForm)
      },
      deep: true
    }
  },
  methods: {
    hide() {
      clearInterval(this.timer)
      this.popshow = false
    },
    handleClose() {
      this.$refs['ruleForm'].clearValidate()
      this.$emit('update:dialogVisible', false)
    },
    resetForm() {
      this.$refs['ruleForm'].clearValidate()
      this.$emit('update:dialogVisible', false)
    },
    input(e) {
      this.$forceUpdate()
    },
    change(enName, e, DialogTitle) {
      this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle })
    },
    focus(row, item) {
      this.$emit('Selectfocus', { row: row, item: item })
    },
    async bind() {
      // this.popshow=true
      clearInterval(this.timer)
      const res = await qrcode({ type: 'erp', user_id: -1 })
      this.$nextTick(() => {
        this.imgurl = res.datas.qrcode
      })
      this.timer = setInterval(async() => {
        this.$store.dispatch('user/wxbinding', { ticket: res.datas.ticket }).then((res) => {
          if (res.errcode == 0) {
            // this.$store.dispatch('user/getInfo')
            this.ruleForm.openid = res.datas.openid
            this.ruleForm.unionid = res.datas.unionid
            this.popshow = false
            clearInterval(this.timer)
          }
        })
      }, 2000)
    },
    submitForm(formName, name, DialogTitle) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.$emit('save', {
            row: this.ruleForm,
            tabPosition: this.tabPosition,
            checked: this.checked,
            name: name,
            DialogTitle: DialogTitle
          })
          // this.$emit('update:dialogVisible', false)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bodydialog ::v-deep  .el-form-item{
    margin-bottom: 18px;
    margin-left: 18px;
}
.bodydialog ::v-deep  .el-cascader--small{
    width: 100%;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
</style>>
