<template>
  <el-row>
    <el-form-item label="控件标题">
      <el-input v-model="activeData.__config__.label" placeholder="请输入控件标题" />
    </el-form-item>
    <template v-if="!activeData.__config__.isSubTable">
      <el-form-item label="控件栅格">
        <el-slider v-model="activeData.__config__.span" :max="24" :min="6" show-stops :step="2" show-tooltip />
      </el-form-item>
      <el-form-item label="标题宽度">
        <el-input-number v-model="activeData.__config__.labelWidth" placeholder="标题宽度" :min="0" :precision="0" controls-position="right" />
      </el-form-item>
    </template>
    <el-form-item label="控件宽度" v-if="activeData.__config__.isSubTable">
      <el-input-number v-model="activeData.__config__.columnWidth" placeholder="控件宽度" :min="0" :precision="0" controls-position="right" />
    </el-form-item>
    <el-form-item label="是否隐藏">
      <el-switch v-model="activeData.displayNone" />
    </el-form-item>
    <el-divider>流水号规则</el-divider>
    <template>
      <draggable :list="activeData.serialgz" :animation="340" group="serialItem" handle=".option-drag">
        <div v-for="(item, index) in activeData.serialgz" :key="index" class="serial-item">
          <div class="serial-item-gz">
            <div class="serial-label">{{ serialLabel(item.type) }}</div>
            <el-input v-if="item.type === 'fixedChars'" v-model="item.chars" placeholder="请输入内容" />
            <el-input v-if="item.type === 'createTime'" @click.native="setTimeFun(item)" readonly :value="getSerialData(item.format)" />
            <el-input v-if="item.type === 'incNumber'" @click.native="setIncNumberFun(item)" readonly :value="getSerialincNumber(item)" placeholder="请输入内容" />
            <el-input v-if="item.type === 'widget'" readonly :value="item.widgetName" placeholder="请输入内容" />
          </div>
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <div v-if="item.type !== 'incNumber'" class="close-btn select-line-icon" @click="activeData.serialgz.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link"> <i class="el-icon-plus el-icon--right"></i> 添加 </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="fixedChars">固定字符</el-dropdown-item>
          <el-dropdown-item :disabled="getCreateTimeFilter()" command="createTime">提交日期</el-dropdown-item>
          <el-dropdown-item command="widget">
            <el-dropdown trigger="hover" @command="widgethandleCommand" placement="right-start" class="personalization">
              <span class="personalization"> 表单字段 <i class="el-icon-arrow-right el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(i, k) in widgetRules" :command="i.widgetvModel">{{ i.widgetName }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dialog title="日期格式设置" :visible.sync="timeDialogVisible" width="500px" append-to-body>
        <div>
          <el-radio v-model="timeSetForm.formatType" label="preset">预定义格式</el-radio>
          <div style="padding: 10px">
            <el-select v-model="timeSetForm.presetFormat" filterable :disabled="timeSetForm.formatType === 'custom'">
              <el-option v-for="(item, i) in presetList" :key="i" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </div>
        <div>
          <el-radio v-model="timeSetForm.formatType" label="custom">自定义格式</el-radio>
          <div style="padding: 10px">
            <el-input v-model="timeSetForm.customFormat" :disabled="timeSetForm.formatType === 'preset'" placeholder="请输入自定义格式" />
            <P>格式预览：{{ getCustomFormat(timeSetForm.customFormat) }}</P>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="timeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="serialTimeSetClick()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="计数设置" :visible.sync="serialDialogVisible" width="500px" append-to-body>
        <div>
          <p style="padding-bottom: 10px">计数位数</p>
          <el-input-number v-model="incNumberSetForm.digitsNum" :min="2" :max="12" label="计数位数"></el-input-number>
        </div>
        <div>
          <p style="padding: 10px 0">
            <span>位数固定 </span>
            <el-tooltip
              style="cursor: pointer"
              effect="dark"
              :content="'开启后，会根据计数位数显示计数值。如，当计数位数为 5，当前计数为 1 时，开启位数固定时，流水号显示为 00001；未开启时，则流水号显示为 1。'"
              placement="top"
            >
              <i class="el-icon-question" />
            </el-tooltip>
          </p>
          <el-switch v-model="incNumberSetForm.fixedLength" />
        </div>
        <div>
          <p style="padding: 10px 0">重置周期</p>
          <el-select v-model="incNumberSetForm.resetCycle">
            <el-option label="不自动重置" :value="0"></el-option>
            <!--          <el-option label="每分钟重置" :value="4"></el-option>-->
            <el-option :disabled="!getCreateTimeFormat(1)" label="每年重置" :value="1"></el-option>
            <el-option :disabled="!getCreateTimeFormat(2)" label="每月重置" :value="2"></el-option>
            <el-option :disabled="!getCreateTimeFormat(3)" label="每日重置" :value="3"></el-option>
          </el-select>
        </div>
        <div>
          <p style="padding: 10px 0">初始值</p>
          <el-input-number v-model="incNumberSetForm.startValue" :min="1" label="初始值"></el-input-number>
        </div>
        <div>
          <p style="padding: 20px 0; color: #999999">当前值：{{ resetSerialnumber }}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="serialDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="IncNumberSetClick">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </el-row>
</template>

<script>
import iconBox from '@/components/JNPF-iconBox'
import comMixin from './mixin'
import draggable from 'vuedraggable'
import moment from 'moment'
import { getResetSerialnumber } from '@/api/onlineDev/visualDev'
let presetList = [
  { label: '2024', value: 'yyyy' },
  { label: '202401', value: 'yyyyMM' },
  { label: '2024-01', value: 'yyyy-MM' },
  { label: '2024/01', value: 'yyyy/MM' },
  { label: '20240101', value: 'yyyyMMDD' },
  { label: '2024-01-01', value: 'yyyy-MM-DD' },
  { label: '2024/01/01', value: 'yyyy/MM/DD' },
  { label: '0101', value: 'MMDD' },
  { label: '01-01', value: 'MM-DD' },
  { label: '01/01', value: 'MM/DD' }
]
export default {
  props: ['activeData', 'drawList', 'columnModelId'],
  mixins: [comMixin],
  components: { iconBox, draggable },
  name: 'serialNumber',
  data() {
    return {
      timeDialogVisible: false,
      serialDialogVisible: false,
      serialRules: [
        // {type:"incNumber",digitsNum:5,fixedLength:true,resetDuration:'none',startValue:1},
        { type: 'fixedChars', chars: '' },
        { type: 'createTime', formatType: 'preset', format: 'yyyyMMDD', chars: '' }
      ],
      widgetRules: [],
      presetList: presetList,
      timeSetForm: {
        formatType: 'preset',
        presetFormat: 'yyyyMMDD',
        customFormat: ''
      },
      incNumberSetForm: {
        digitsNum: 5,
        fixedLength: true,
        resetCycle: 0,
        startValue: 1
      },
      resetSerialnumber: 0
    }
  },
  created() {
    this.getDrawList()
  },
  methods: {
    getCreateTimeFormat(formatType) {
      let item = this.activeData.serialgz.find((o) => o.type === 'createTime')
      if (!item || !item.format) return
      let flag
      switch (formatType) {
        case 3:
          flag = /D{2}/.test(item.format)
          break
        case 2:
          flag = /M{2}/.test(item.format)
          break
        case 1:
          flag = /y{4}/.test(item.format)
          break
      }
      return flag
    },
    getDrawList() {
      // 目前支持添加的字段包括：单行文本、数字、下拉框、单选按钮组。（子字段暂不支持添加） 参考1简1道1云1
      let list = ['comInput', 'numInput', 'radio', 'select']
      let nowList = this.drawList.filter((i, k) => list.includes(i.__config__.jnpfKey))
      this.widgetRules = nowList.map((o, l) => {
        return {
          widgetName: o.__config__.label,
          widgetvModel: o.__vModel__,
          chars: ''
        }
      })
    },
    serialLabel(key) {
      let text = ''
      switch (key) {
        case 'incNumber':
          text = '自动计数'
          break
        case 'fixedChars':
          text = '固定字符'
          break
        case 'createTime':
          text = '提交日期'
          break
        case 'widget':
          text = '表单字段'
          break
      }
      return text
    },
    handleCommand(command) {
      if (command === 'widget') return
      let item = this.serialRules.find((o) => o.type === command)
      this.activeData.serialgz.push(item)
    },
    widgethandleCommand(command) {
      let item = this.widgetRules.find((o) => o.widgetvModel === command)
      this.activeData.serialgz.push({ type: 'widget', ...item })
    },
    getCreateTimeFilter() {
      let item = this.activeData.serialgz.map((o) => {
        return o.type
      })
      return item.includes('createTime')
    },
    getSerialData(format) {
      let newData = moment().format(format)
      return '格式：' + newData
    },
    getSerialincNumber(row) {
      let { digitsNum, resetCycle } = row
      let durationStr = resetCycle === 1 ? '每年重置' : resetCycle === 2 ? '每月重置' : resetCycle === 3 ? '每日重置' : '不自动重置'
      return digitsNum + '位数字,' + durationStr
    },
    getCustomFormat(format) {
      return format ? moment().format(format) : moment().format('yyyy-MM-DD')
    },
    setTimeFun(item) {
      this.timeDialogVisible = true
      this.timeSetForm = {
        formatType: item.formatType,
        presetFormat: item.formatType === 'preset' ? item.format : 'yyyyMMDD',
        customFormat: item.formatType === 'custom' ? item.format : ''
      }
    },
    serialTimeSetClick() {
      this.activeData.serialgz.forEach((item, k) => {
        if (item.type === 'createTime') {
          this.$set(item, 'formatType', this.timeSetForm.formatType)
          this.timeSetForm.formatType === 'preset' ? this.$set(item, 'format', this.timeSetForm.presetFormat) : this.$set(item, 'format', this.timeSetForm.customFormat)
        }
      })
      this.timeDialogVisible = false
    },
    setIncNumberFun(item) {
      this.serialDialogVisible = true
      this.resetSerialnumber = 0
      getResetSerialnumber(this.columnModelId).then((res) => {
        if (res.data.data) {
          this.resetSerialnumber = res.data.data.count
        }
      })
      this.incNumberSetForm = {
        digitsNum: item.digitsNum,
        fixedLength: item.fixedLength,
        resetCycle: item.resetCycle || 0,
        startValue: item.startValue || 1
      }
    },
    IncNumberSetClick() {
      this.activeData.serialgz.forEach((item, k) => {
        if (item.type === 'incNumber') {
          this.$set(item, 'digitsNum', this.incNumberSetForm.digitsNum)
          this.$set(item, 'fixedLength', this.incNumberSetForm.fixedLength)
          this.$set(item, 'resetCycle', this.incNumberSetForm.resetCycle)
          this.$set(item, 'startValue', this.incNumberSetForm.startValue)
        }
      })
      this.serialDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.serial-item {
  height: 32px;
  line-height: 30px;
  margin-bottom: 10px;
  display: flex;
  box-sizing: border-box;
  .serial-item-gz {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    padding: 0 10px;
    .serial-label {
      width: 58px;
      display: inline-block;
      color: var(--color-primary);
    }
  }
  .el-input {
    position: relative;
    display: inline-block;
    width: 180px;
    ::v-deep & .el-input__inner {
      border: none;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
    }
  }
}
::v-deep .el-dropdown-link {
  cursor: pointer;
  color: var(--color-primary);
}
::v-deep .el-icon-arrow-down {
  font-size: 12px;
}
</style>
