<template>
  <div>
    <el-drawer class="edit-drawer" title="添加" size="1000px" :visible.sync="visible" direction="rtl" :modal="modal"
      :wrapper-closable="false" @close="close">
      <el-form ref="form" :rules="rules" size="small" :model="form" label-width="120px">
        <el-form-item label="身份" prop="type">
          <el-select v-model="form.type" placeholder="请选择身份">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <UploadQiniu
            :file-list="img_list"
            :modal='false'
            :limit="1"
            @uploadSuccess="uploadSuccess"
            @handleRemove="uploadRemove"
          />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item v-if="form.type == 4" label="工号" prop="job_no">
          <el-input v-model="form.job_no" placeholder="请输入工号"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="duties">
          <el-input v-model="form.duties" placeholder="请输入职务"></el-input>
        </el-form-item>
        <el-form-item v-if="form.type == 4" label="业务" prop="business">
          <el-input v-model="form.business" placeholder="请输入业务"></el-input>
        </el-form-item>
        <el-form-item v-if="form.type != 4" label="联系方式" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item v-if="form.type != 4 " label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right; padding-right: 10px">
          <el-button type="primary" @click="confirm">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
  import UploadQiniu from "@/component/common/UploadQiniu.vue";
  import {
    addYg
  } from '@/api/info.js'
  export default {

    name: "AddClass",
    components: {
      UploadQiniu
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      isEdit: {
        type: Boolean,
        default: false,
      },
      // 是否需要遮罩层
      modal: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        img_list: [],
        options: [{
            value: 1,
            label: '招商'
          },
          {
            value: 2,
            label: '连锁'
          },
          {
            value: 3,
            label: '共享股东'
          },
          {
            value: 4,
            label: '高管'
          }
        ],
        form: {
          avatar: "",
          name: "", //姓名
          duties: "", //职务
          type: '', //1招商2连锁3共享股东4高管
          phone: "", //联系方式 添加1招商2连锁3共享股东传入
          address: "", //地址 添加1招商2连锁3共享股东传入
          business: "", //业务
          job_no: "" //工号
        },
        rules: {
          avatar: [{
            required: true,
            message: "请选择头像",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "请选择身份",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }],
          duties: [{
            required: true,
            message: "请选输入职务",
            trigger: "blur"
          }],
          phone: [{
            required: true,
            message: "请选输入手机号",
            trigger: "blur"
          }],
          business: [{
            required: true,
            message: "请选输入业务",
            trigger: "blur"
          }],
          job_no: [{
            required: true,
            message: "请选输入工号",
            trigger: "blur"
          }],
          address: [{
            required: true,
            message: "请选输入地址",
            trigger: "blur"
          }],
        }
      };
    },
    methods: {
      uploadSuccess(val, res, file, fileList) {
        this.form.avatar = val;
        this.img_list = fileList;
      },
      uploadRemove(file, fileList) {
        this.form.avatar = "";
        this.img_list = fileList;

      },
      close() {
        this.$emit("close");
      },
      async confirm() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            // if (this.form.type != 4) {
            //   if(this.form.phone == '') {
            //     return this.$baseMessage(
            //       "请输入联系方式",
            //       "error"
            //     );
            //   }
            //   if(this.form.address == '') {
            //     return this.$baseMessage(
            //       "请输入联系方式",
            //       "error"
            //     );
            //   }
            // } else {
            //   if (this.form.business == '') {
            //     return this.$baseMessage(
            //       "请输入业务",
            //       "error"
            //     );
            //   }
            //   if (this.form.job_no == '') {
            //     return this.$baseMessage(
            //       "请输入工号",
            //       "error"
            //     );
            //   }
            // }
            let data = await addYg(this.form)
            this.close();
            this.$emit("confirm");
          }
        })
      },
    }
  };
</script>

<style scoped>
  .btn-up {
    position: relative;
  }

  .btn-department {
    position: absolute;
    left: 270px;
    top: 4px;
  }

  .btn-role-up {
    position: relative;
  }

  .add-role {
    position: absolute;
    left: 270px;
    top: 4px;
  }

  .creat-shop {
    color: #1890ff;
    font-size: 12px;
  }
</style>
