<template>
  <div>
    <ai-detail class="add">
      <template slot="title">
        <ai-title title="添加档案" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
      </template>
      <template slot="content">
        <el-form class="content-right" :model="form" ref="ruleForm" :rules="rules" label-width="130px"
                 label-position="right" size="small">

          <ai-card title="基本信息">
            <template #content>
              <el-row type="flex">
                <el-form-item label="经营者姓名：" style="width: 100%;" prop="name">
                  <el-input v-model="form.name" placeholder="请输入姓名" autocomplete="off"
                            size="small" maxlength="20"
                            show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" style="width: 100%;" prop="idNumber">
                  <el-input v-model="form.idNumber" placeholder="请输入身份证号" autocomplete="off"
                            size="small" maxlength="18" @change="idChange"
                            show-word-limit></el-input>
                </el-form-item>
              </el-row>
              <el-row type="flex">
                <el-form-item label="性别：" style="width: 100%;" prop="sex">
                  <ai-select
                      v-model="form.sex"
                      style="width: 100%;"
                      placeholder="性别"
                      :selectList="$dict.getDict('sex')">
                  </ai-select>
                </el-form-item>
                <el-form-item label="联系电话：" v-model="form.phone" style="width: 100%;" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入联系电话" autocomplete="off"
                            size="small" maxlength="18"
                            show-word-limit></el-input>
                </el-form-item>
              </el-row>
              <el-row type="flex">
                <el-form-item label="出生日期：" style="width: 100%;" prop="birthday">
                  <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="form.birthday"
                                  placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
                </el-form-item>
                <el-form-item label="年龄：" style="width: 100%;" prop="age">
                  <el-input v-model="form.age" placeholder="请输入年龄" disabled autocomplete="off"
                            size="small"></el-input>
                </el-form-item>
              </el-row>
            </template>
          </ai-card>
          <ai-card title="门店信息">
            <template #content>
              <el-row type="flex">
                <div class="flex-colum">
                  <el-form-item label="门店名称：" style="width: 100%;" prop="shopName">
                    <el-input v-model="form.shopName" placeholder="请输入姓名" autocomplete="off"
                              size="small" maxlength="20"
                              show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="经营类型：" style="width: 100%;" prop="operatorType">
                    <ai-select
                        v-model="form.operatorType"
                        placeholder="请选择经营范围"
                        :selectList="$dict.getDict('operatorType')" style="width: 100%;">
                    </ai-select>
                  </el-form-item>
                  <el-form-item label="所属片区：" style="width: 100%;" prop="girdCode">
                    <el-input disabled v-model="form.girdName" size="small" placeholder="请选择片区">
                      <template slot="append">
                        <el-button size="small" @click="handleSelectGrid">选择片区</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </div>

                <el-form-item label="门店照片" style="width: 100%;" prop="fileUrl">
                  <ai-uploader
                      :instance="instance"
                      isShowTip
                      v-model="form.fileUrl"
                      :limit="1"
                      is-crop>
                    <template slot="tips">
                      <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
                      <p>图片比例：1.6：1</p>
                    </template>
                  </ai-uploader>
                </el-form-item>
              </el-row>
              <el-form-item label="社会信用代码：" style="width: 100%;" prop="creditCode">
                <el-input v-model="form.creditCode" placeholder="请输入社会统一信用代码" size="small"></el-input>
              </el-form-item>
              <el-form-item label="门店住址：" style="width: 100%;" prop="addressCode">
                <ai-area-select :instance="instance" clearable always-show
                                :disabled-level="$store.state.user.info.areaList.length"
                                @name="v=>form.areaName=v" v-model="form.areaId"/>
              </el-form-item>
              <el-form-item label="" style="width:100%" prop="address">
                <el-input
                    size="small"
                    placeholder="请输入详细地址"
                    clearable
                    v-model="form.address"
                    maxlength="50"
                    show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="门店描述：" style="width: 100%" prop="description">
                <el-input v-model="form.description" placeholder="请输入门店描述" type="textarea" :rows="3"></el-input>
              </el-form-item>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </ai-detail>
    <ai-dialog title="选择片区" :visible.sync="dialog" :customFooter="true" border width="720px">
      <div class="grid">
        <el-tree
            :data="treeList"
            :props="defaultProps"
            node-key="id"
            ref="treeRef"
            :check-strictly="true"
            show-checkbox
            @check="onCheckChange">
        </el-tree>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button size="medium" @click="dialog=false">取消</el-button>
        <el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
      </div>
    </ai-dialog>
  </div>
</template>

<script>
import {ID} from "dui/lib/js/utils";

export default {
  name: 'Add',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },

  data() {
    return {
      form: {
        id: null,
        areaId: '',
        name: '',
        idNumber: '',
        sex: '',
        phone: '',
        birthday: '',
        age: '',
      },
      dialog: false,
      treeList: [],
      defaultProps: {
        children: "children",
        label: "girdName",
      },
      rules: {
        name: [{required: true, message: '请输入经营者姓名', trigger: 'blur'}],
        idNumber: [{required: true, message: '请输入身份证号', trigger: 'blur'}],
        sex: [{required: true, message: '请选择性别', trigger: 'change'}],
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        shopName: [{required: true, message: '请输入门店名称', trigger: 'blur'}],
        operatorType: [{required: true, message: '请选择经营者类型', trigger: 'change'}],
        girdCode: [{required: true, message: '请选择所属片区', trigger: 'change'}],
        fileUrl: [{required: true, message: '请选择门店照片', trigger: 'change'}],
        addressCode: [{required: true, message: '请选择门店住址', trigger: 'change'}],
      }
    }
  },

  created() {
    this.form.areaId = this.$store.state.user.info.areaId
    this.$dict.load('sex', 'operatorType')

    if(this.params.id){
      this.getDetail(this.params);
    }
  },

  methods: {
    async getDetail({id}){
      try {
        const {code,data} = await this.instance.post('/app/appshoparchives/queryDetailById',null,{
          params:{
            id
          }
        })
        if(code===0){
          this.form = {...data}
        }
      }catch (e) {
        console.error(e)
      }
    },
    async handleSelectGrid() {
      try {
        this.dialog = true
        const {code, data} = await this.instance.post('/app/appgirdinfo/listAll3')
        if (code === 0) {
          console.log('data--->', data)
        }
      } catch (e) {
        console.error(e)
      }
    },

    getCheckedTree() {

    },
    onCheckChange(e) {

    },

    idChange(val) {
      if (val.length == 18) {
        this.IdCard(val);
      }
    },

    IdCard(UUserCard) {
      if (UUserCard) {
        const idCard = new ID(UUserCard)
        this.form.age = idCard.age
        this.form.birthday = idCard.birthday
      }
    },

    async addOrUpdate() {
      try {
        const {code, data} = await this.instance.post(`/app/appshoparchives/addOrUpdate`, null, {
          params: {
            ...this.form
          }
        })
        if (code === 0) {
          this.$message.success('保存成功');
          this.form = {...data}
        }
      } catch (e) {
        console.error(e)
      }
    },

    handleSave() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.addOrUpdate()
        }
      })
    },

    cancel() {
      this.$emit('change', {
        type: 'List',
        isRefresh: true
      })
    }
  }
}
</script>

<style scoped lang="scss">
.add {

  .flex-colum {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .files {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .file-item {
      width: 118px;
      height: 118px;
      margin: 0 20px 20px 0;

      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      img {
        cursor: pointer;
        transition: all ease 0.3s;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}
</style>
