<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增黑名单记录' : '编辑黑名单记录'"
      :form="form" :rules="rules" @submit="submit">

      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>姓名：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入姓名" style="width:300px"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:mobile>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>联系电话：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.mobile" placeholder="请输入联系电话" style="width:300px"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:credent>
        <div class="xy-table-item">
          <div class="xy-table-item-label">证件类型：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.credent" placeholder="请选择" style="width:300px">
              <el-option v-for="item in credentList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:idcard>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            证件号码：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.idcard" placeholder="请输入证件号码" style="width:300px"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:company_name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            单位名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.company_name" placeholder="请输入单位名称" style="width:300px"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:start_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">开始日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width:300px" value-format="yyyy-MM-dd" v-model="form.start_date" type="date" placeholder="选择开始时间">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:end_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">结束日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width:300px" value-format="yyyy-MM-dd" v-model="form.end_date" type="date" placeholder="选择开始时间">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:status>
        <div class="xy-table-item">
          <div class="xy-table-item-label">状态：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.status" placeholder="请选择" style="width:300px">
              <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:file>
        <div class="xy-table-item">
          <div class="xy-table-item-label">附件上传：</div>
          <div class="xy-table-item-content">
            <el-upload style="width: 620px" :multiple="true" class="upload-demo" :action="action"
              :before-upload="uploadBeforePic" :on-success="picListSuccessHandler" :on-remove="picListRemoveHandler"
              :file-list="fileList" list-type="picture" multiple>
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">
                只能上传jpg/png/mp4文件，且不超过10M
              </div> -->
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            备注：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" style="width:300px"></el-input>
          </div>
        </div>
      </template>

    </xy-dialog>


  </div>
</template>

<script>
  import {
    show,
    save
  } from "@/api/visit/blacklist.js"
  export default {
    components: {},
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        fileList: [],
        form: {
          name: "",
          mobile: "",
          credent: 1,
          idcard: "",
          company_name: "",
          start_date: "",
          end_date: "",
          status: 1,
          file:[],
          remark:""
        },
        credentList: [{
            id: 1,
            value: "身份证"
          },
          {
            id: 2,
            value: "护照"
          },
        ],
        statusList: [{
            id: 1,
            value: "启用"
          },
          {
            id: 2,
            value: "禁用"
          },
        ],
        rules: {
          name: [{
            required: true,
            message: "请填写姓名",
          }],
          mobile: [{
              required: true,
              message: "请填写联系电话",
            },
            {
              pattern: /^[1][3-9][\d]{9}/,
              message: "手机号格式错误",
            }
          ],
        },

      }
    },
    created() {},
    methods: {

      async getDetail() {
        const res = await show({
          id: this.id
        })
        this.form = {
          name: res?.name,
          mobile: res?.mobile,
          credent: res?.credent,
          idcard: res?.idcard,
          company_name: res?.company_name,
          start_date: res?.start_date,
          end_date: res?.end_date,
          status: res?.status,
          file:res?.file,
          remark:res?.remark
        },
        this.fileList = res.file_detail
      },
      //上传
      uploadBeforePic(file) {
        if (file.size / 1000 > 2048) {
          this.$successMessage('上传图片大小超过2M！', '', 'warning')
          return false;
        }
      },
      picListSuccessHandler(res, file, fileList) {
        this.form.file = fileList.map((item) => {
          return item.response ? item.response.id: item.id
        });
      },
      picListRemoveHandler(file, fileList) {
        this.form.file = fileList.map((item) => {
          return item.response ? item.response.id: item.id
        });
      },
      submit() {
        let that = this
        if (this.type === 'editor') {
          this.form.id = this.id
        }else{
          this.form.id = ""
        }
        save({
          ...that.form
        }).then(res => {
          this.$successMessage(this.type, '黑名单')
          this.isShow = false
          this.$emit('refresh')
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.fileList= []
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  .xy-table-item-label {
    width: 180px !important;
  }

  .xy-table-item-content {
    width: 100%
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }
</style>
