<template>
  <div class="addfield" style="padding: 0;margin: 0;">
    <q-dialog v-model="Isadd" persistent>
      <q-card style="width: 700px; max-width: 80vw;">
        <q-card-section>
          <div class="text-h6">新建/修改字段</div>
        </q-card-section>
        <q-separator />
        <q-card-section class="q-pt-none" style="margin-top: 15px;">
          <q-splitter v-model="splitterModel">
            <template v-slot:before>
              <q-tabs v-model="tab" vertical @input="getdefault">
                <q-tab v-for="(x,y) in tabsList" :key='y' :name="x.Id" :label="x.Name" :disable="x.disable" />
              </q-tabs>
            </template>
            <template v-slot:after>
              <div style="height: 100%; width: 100%;padding: 16px">
                <el-form label-width="120px">
                  <el-form-item label="字段名称：">
                    <q-input clearable filled maxlength="8" counter v-model="addMsg.Name" @input="$forceUpdate()"
                      label="字段名称" :rules="[val => !!val || '请输入字段名称']" />
                  </el-form-item>
                  <el-form-item label="部门选择：">
                    <q-radio v-model="departmentType" val="1" label="公司字段" @input='addMsg.DeptId=0' />
                    <q-radio v-model="departmentType" val="2" label="部门字段" @input='addMsg.DeptId=0' />
                    <div v-if="departmentType==2">
                      <selectTree :treeData='deptl' :defaultArray="returnString" nodeKey="DeptId" :multiple="false"
                        labelKey="DeptName" childrenKey="ChildList" tipText="选择部门" @getChild="getChild"
                        classStr="col-6 q-pb-lg">
                      </selectTree>
                    </div>
                  </el-form-item>
                  <el-form-item label="字数限制：" v-if='tab==1'>
                    <q-input v-model.number="addMsg.WordNum" :rules="[val => !!val || '不能为空']" type="number" filled
                      :max='50' :min='0' style="max-width: 200px" />
                  </el-form-item>
                  <el-form-item label="输入类型：" v-if='tab==1'>

                    <div class="q-gutter-sm">
                      <q-checkbox v-model="addMsg.InputType" v-for="(x,y) in checkboxList" :key='y' :val="x.Id"
                        :label="x.Name" />
                    </div>
                  </el-form-item>
                  <el-form-item label="文字字数：" v-if='tab==2'>
                    <el-input-number v-model="addMsg.WordNum" @change="handleChange" :min="1" :max="2000">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item label="列表选项：" v-if='tab==3|| tab==4'>
                    <draggable v-model="addMsg.OptionsList">
                      <div v-for="(x,y) in addMsg.OptionsList" :key='y'
                        style="display: flex;align-items: center;margin-bottom: 10px;">
                        <i class="iconfont icon-weiyi" style="font-size: 14px;color: #777;margin-right: 10px;"></i>
                        <q-input clearable filled maxlength="16" v-model="x.Name" style="width: 280px;"
                          @input="$forceUpdate()" label="列表项值" />
                        <q-btn round size="xs" color="deep-orange" icon="delete" v-if="addMsg.OptionsList.length>1"
                          @click="addMsg.OptionsList.splice(y,1)" style='margin-left: 10px;' />
                        <q-btn round size="xs" color="primary" icon="add" v-if="addMsg.OptionsList.length==y+1"
                          @click="addMsg.OptionsList.push({Id:0,Name:''})" style='margin-left: 10px;' />
                      </div>
                    </draggable>
                  </el-form-item>
                  <el-form-item label="小数位数：" v-if='tab==7'>
                    <q-select filled stack-label option-value="Id" option-label="Id" v-model="addMsg.Digits" ref="Id"
                      :options="decimalslist" label="小数位数" :dense="false" emit-value map-options />
                  </el-form-item>
                  <el-form-item label="属性设置：">
                    <div class="q-gutter-sm">
                      <q-toggle v-model="addMsg.Required" label="必填项" :true-value="1" :false-value="2" />
                      <q-toggle v-model="addMsg.Enable" label="启用" :true-value="1" :false-value="2" />
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </q-splitter>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn class="q-mr-md" label="取消" @click="getcancel()" />
          <q-btn color="accent" class="q-mr-md" label="确定" @click="savewb()" :loading="loading" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import draggable from "vuedraggable"
  import selectTree from '../../../../../components/common/select-tree'
  import {
    setCustomerFiledInfo
  } from '../../../../../api/system/wechat'
  const defaultObj = {
    Id: 0,
    Type: 1,
    Name: '',
    Required: 2,
    DeptId: 0,
    WordNum: 1,
    InputType: [],
    OptionsList: [{
      Id: 1,
      Name: ''
    }],
    Digits: 0,
    Enable: 1,

  }
  export default {
    name: "addfield",
    components: {
      draggable,
      selectTree,
    },
    props: {
      obj: {
        type: Object,
        default: {},
      },
      deptl: {
        type: Array,
        default: [],
      },
      tabsList: {
        type: Array,
        default: [],
      },
      checkboxList: {
        type: Array,
        default: [],
      },
    },
    data() {
      return {
        loading: false,
        Isadd: true,
        splitterModel: 13,
        tab: 1,
        departmentType: '1',
        decimalslist: [{
          Id: 0
        }, {
          Id: 1
        }, {
          Id: 2
        }, {
          Id: 3
        }, {
          Id: 4
        }, {
          Id: 5
        }, {
          Id: 6
        }, {
          Id: 7
        }, {
          Id: 8
        }, {
          Id: 9
        }, {
          Id: 10
        }, {
          Id: 11
        }, ],
        addMsg: Object.assign({}, defaultObj),
        returnString: [], //默认岗位
      }
    },
    created() {
      this.Isadd = true
      if (this.obj != null) { //编辑的时候数据处理
        let data = {
          Id: this.obj.Id,
          Type: this.obj.Type,
          Name: this.obj.Name,
          Required: this.obj.Required,
          DeptId: this.obj.DeptId,
          WordNum: this.obj.WordNum,
          InputType: this.obj.InputType.split(',').map(Number),
          OptionsList: this.obj.OptionsList,
          Digits: this.obj.Digits,
          Enable: this.obj.Enable,
        }
        this.tab = this.obj.Type
        if (this.obj.DeptId > 0) {
          this.departmentType = '2'
          this.returnString = []
          setTimeout(() => {
            this.returnString.push(this.obj.DeptId)
            this.$forceUpdate();
          }, 500)
        }
        this.addMsg = data
        this.tabsList.forEach(x => {
          if (x.Id != data.Type) {
            x.disable = true
          }
        })
      } else {
        this.addMsg.InputType = []
        this.checkboxList.forEach(x => {
          this.addMsg.InputType.push(x.Id)
        })
      }
    },

    methods: {
      savewb() {
        let addMsg = JSON.parse(JSON.stringify(this.addMsg))
        addMsg.Type = this.tab //先类型赋值
        if (addMsg.Name == '') {
          this.$q.notify({
            type: 'negative',
            message: `请填写字段名称`,
            position: 'top'
          })
          return
        }
        if ((addMsg.Type == 1 || addMsg.Type == 2) && addMsg.WordNum == '') {
          this.$q.notify({
            type: 'negative',
            message: `字数不能为空`,
            position: 'top'
          })
          return
        }
        if (this.departmentType == 2 && (addMsg.DeptId == 0 || addMsg.DeptId == '')) {
          this.$q.notify({
            type: 'negative',
            message: `请选择部门`,
            position: 'top'
          })
          return
        }
        if (addMsg.Type == 3 || addMsg.Type == 4) {
          for (let i = 0; i < addMsg.OptionsList.length; i++) {
            let x = addMsg.OptionsList[i]
            if (x.Name == '') {
              this.$q.notify({
                type: 'negative',
                message: `请填写列表选项值`,
                position: 'top'
              })
              break
            }
            addMsg.OptionsList[i].Id = i + 1
          }
        }
        if (addMsg.Type == 1) {
          if (addMsg.InputType.length == 0) {
            this.$q.notify({
              type: 'negative',
              message: `至少选择一种输入类型`,
              position: 'top'
            })
            return
          } else {
            addMsg.InputType = addMsg.InputType.join(',')
          }

        } else {
          addMsg.InputType = '1'
        }
        this.loading = true
        setCustomerFiledInfo(addMsg).then(res => {
          this.loading = false
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: res.Message,
            position: 'top'
          })
          this.$emit('getcancel', 2)
        }).catch((e) => {
          this.loading = false
        })
      },
      getcancel() {
        this.$emit('getcancel', 1)
      },
      getChild(deptArray) {
        var tempStr = "";
        if (deptArray && deptArray != '') {
          tempStr = deptArray;
        }
        this.addMsg.DeptId = tempStr
      },
      handleChange(value) {

      },
      getdefault() { //新增的时候初始默认值
        this.addMsg = Object.assign({}, defaultObj)
        this.addMsg.OptionsList = [{
          Id: 0,
          Name: '',
        }] //多选和单选的值
      }
    }
  }

</script>

<style>

</style>
