<template>
  <el-dialog
    :title="isEdit ? '编辑账号' : '添加账号'"
    width="800px"
    :visible.sync="visible"
    :destroy-on-close="false"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="left"
      label-width="110px"
    >
      <TagCard title="基础信息配置">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item style="flex: 0.5" label="账号名称" prop="account">
              <el-input
                v-model="form.account"
                placeholder="请输入账号名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="账号密码"
              prop="password"
            >
              <el-input
                v-model="form.password"
                placeholder="请输入账号密码"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="负责人姓名"
              prop="contactsName"
            >
              <el-input
                v-model.trim="form.contactsName"
                placeholder="请输入负责人姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="负责人手机号"
              prop="contactsPhone"
            >
              <el-input
                v-model.trim="form.contactsPhone"
                placeholder="请输入负责人手机号"
                maxlength="11"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="单位详细地址" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入单位详细地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </TagCard>
      <TagCard title="信息安全配置">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="脱敏字段">
              <el-checkbox-group v-model="form.desensitizeField">
                <el-checkbox
                  v-for="item in [
                    {label:'姓名',code:'username'},
                    {label:'手机号',code:'phone'},
                    {label:'身份证',code:'IDCard'}
                  ]"
                  :key="item.code"
                  :label="item.label"
                >{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </TagCard>
      <TagCard title="功能配置">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="是否开启快速入园" prop="type" label-width="180">
              <el-radio-group v-model="form.type">
                <el-radio
                  v-for="item in [
                    {label:'否',code:0},
                    {label:'是',code:1},
                  ]"
                  :key="item.code"
                  :label="item.label"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </TagCard>
      <TagCard title="页面配置">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              :label="`景区照片${
                '(' + form.scenicSpotImages&&form.scenicSpotImages.length + '/' + 4 + ')'
              }`"
              prop="scenicSpotImages"
            >
              <el-upload
                action="https://noise.hz-hanghui.com:8088/hanghui-warehouse/upload/picture"
                accept="image/*"
                list-type="picture-card"
                :limit="4"
                :on-success="handleChange"
                :file-list="form.scenicSpotImages"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </TagCard>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" :loading="submitLoading" @click="submit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import TagCard from '@/components/TagCard';
export default {
  components: {
    TagCard
  },
  props: {
  },
  data() {
    return {
      form: {
        account: '', // 账号名称
        password: '', // 账号密码
        contactsName: '', // 负责人姓名
        contactsPhone: '', // 负责人手机号
        address: '', // 单位详细地址
        desensitizeField: [], // 脱敏字段
        type: '', // 是否开启快速入园
        scenicSpotImages: [] // 景区图片
      },
      rules: {
        account: [
          { required: true, message: '请输入账号名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入账号密码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入单位详细地址', trigger: 'blur' }
        ],
        contactsName: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' }
        ],
        contactsPhone: [
          { required: true, message: '请输入负责人手机号', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择是否开启快速入园', trigger: 'change' }
        ]
      },
      visible: false,
      submitLoading: false,
      isEdit: false
    };
  },
  methods: {
    open(obj) {
      console.log(obj);
      this.visible = true;
      this.submitLoading = false;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (obj && Object.keys(obj).length > 0) {
          console.log(obj);
          this.form.id = obj.id;
          this.form = {
            account: '', // 账号名称
            password: '', // 账号密码
            contactsName: '', // 负责人姓名
            contactsPhone: '', // 负责人手机号
            address: '', // 单位详细地址
            desensitizeField: [], // 脱敏字段
            type: '', // 是否开启快速入园
            scenicSpotImages: [] // 景区图片
          };
          this.isEdit = true;
        } else {
          this.isEdit = false;
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.previewImageVisible = true;
    },
    handleRemove(file, fileList) {
      this.form.scenicSpotImages = fileList;
    },
    handleChange(response, file, fileList) {
      this.form.scenicSpotImages = fileList;
    },
    // 确认按钮
    submit() {
      this.$refs.form.validate(async(pass) => {
        if (!pass) {
          return false;
        }
        if (this.submitLoading) {
          return;
        }
        this.submitLoading = true;
        const res = {
          username: this.form.username,
          password: this.form.password,
          companyName: this.form.companyName,
          provinceId: this.form.provinceId,
          cityId: this.form.cityId,
          areaId: this.form.areaId,
          companyAddress: this.form.companyAddress,
          contactsName: this.form.contactsName,
          contactsPhone: this.form.contactsPhone,
          id: this.isEdit ? this.form.id : undefined
        };
        console.log(res, 555555555555);
        // this.form.id
        //   ? await editDept({ ...this.form })
        //   : await addDept({
        //       ...this.form,
        //     });
        this.$message.success(`${this.isEdit ? '编辑' : '新增'}成功`);
        this.submitLoading = false;
        this.dialogVisible = false;
        this.fetchData();
      });
    }
    // submit(e) {
    // e.preventDefault();
    // this.$refs.form.validate(async(valid) => {
    //   if (!valid) {
    //     return false;
    //   }
    //   if (this.submitLoading) {
    //     return;
    //   }
    //   this.submitLoading = true;
    //   try {
    //     await addOrUpdatePushConfig({
    //       ...this.form,
    //       adminId: this.$store.getters.adminId
    //     });
    //     this.visible = false;
    //     this.$emit('success', this.isEdit);
    //   } catch (e) {
    //     this.$refs.form.resetFields();
    //   } finally {
    //     this.submitLoading = false;
    //   }
    // });
    // }
  }
};
</script>

<style lang="scss" scoped>
</style>
