<template>
  <div class="">
    <el-dialog
      width="700px"
      title="列合计设置"
      v-if="dialogCombinedColumnVisible"
      :visible.sync="dialogCombinedColumnVisible"
      append-to-body
      class="urgent-text"
      custom-class="custom-table-head"
      :before-close="closeCombinedColumn"
      :close-on-click-modal="false"
    >
      <el-form
        :model="CombinedColumnEdit"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="合计名称：" prop="name" label-width="120px">
          <el-input
            v-model="CombinedColumnEdit.name"
            :maxlength="10"
            show-word-limit
            clearable
            validate="required"
            placeholder="请输入合计名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="合计列字段："
          prop="columnField"
          label-width="120px"
        >
          <el-select
            v-model="CombinedColumnEdit.columnField"
            placeholder="请选择列字段"
          >
            <el-option
              v-for="item of columnFieldList"
              :label="item.title"
              :value="item.name"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合计函数：" prop="addFunc" label-width="120px">
          <el-select
            v-model="CombinedColumnEdit.addFunc"
            placeholder="请选择列合计函数"
          >
            <template v-for="item of addFuncList">
              <el-option
                :label="item.value"
                :value="item.key"
                :key="item.key"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="显示格式：" prop="showType" label-width="120px">
          <el-checkbox-group
            v-show="false"
            v-model="CombinedColumnEdit.showType"
          >
            <el-checkbox
              v-for="(item, index) in checkboxOptions"
              :label="item.key"
              :key="item.index"
              name="type"
            >
              <span style="margin-right:8px">{{ item.value }}</span>
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox
            @change="val => Checkboxchange(val, 'monCap')"
            v-model="CombinedColumnEdit.monCap"
            >货币大写</el-checkbox
          >
          <el-checkbox
            @change="Checkboxchange"
            v-model="CombinedColumnEdit.keepSmall"
            :disabled="columnDisabled"
            >保留小数位</el-checkbox
          >
          <el-input-number
            v-if="CombinedColumnEdit.keepSmall"
            v-model="CombinedColumnEdit.num"
            controls-position="right"
            :min="0"
            :max="10"
            style="    margin: 0 24px 0 -22px;"
          ></el-input-number>
          <el-checkbox
            @change="Checkboxchange"
            v-model="CombinedColumnEdit.Micrometer"
            :disabled="columnDisabled"
            >千分位</el-checkbox
          >
          <el-checkbox
            @change="Checkboxchange"
            v-model="CombinedColumnEdit.percentage"
            :disabled="columnDisabled"
            >百分比</el-checkbox
          >
        </el-form-item>
        <el-form-item
          label="单位："
          label-width="120px"
          v-show="!columnDisabled"
        >
          <el-input
            :maxlength="10"
            show-word-limit
            clearable
            v-model="CombinedColumnEdit.unit"
            placeholder="请输入单位"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeCombinedColumn">取 消</el-button>
        <el-button type="primary" @click="saveCombinedColumn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const checkboxOptions = [
  {key: 'keepSmall', value: '保留小数位'},
  {key: 'Micrometer', value: '千分位'},
  {key: 'percentage', value: '百分比'},
  {key: 'monCap', value: '货币大写'}
]

export default {
  props: {
    areadlyList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {},
  data() {
    return {
      rules: {
        name: [{required: true, message: '请输入合计名称', trigger: 'blur'}],
        columnField: [
          {required: true, message: '请选择列字段', trigger: 'change'}
        ],
        showType: [
          {required: false, message: '请选择显示格式', trigger: 'change'}
        ],
        addFunc: [
          {required: true, message: '请选择列合计函数', trigger: 'change'}
        ]
      },
      dialogCombinedColumnVisible: false,
      columnDisabled: false,
      CombinedColumnEdit: {
        showType: [],
        unit: '',
        name: '',
        columnField: '',
        addFunc: '',
        num: 2,
        percentage: false,
        Micrometer: false,
        keepSmall: true,
        monCap: false
      },
      addFuncList: [
        {value: '求和', key: 'add'},
        {value: '计数', key: 'count'},
        {value: '平均值', key: 'average'},
        {value: '最大值', key: 'max'},
        {value: '最小值', key: 'min'}
      ],
      columnFieldList: [],
      checkboxOptions: checkboxOptions
    }
  },
  computed: {},
  watch: {
    'CombinedColumnEdit.monCap': {
      handler(val) {
        if (val) {
          this.columnDisabled = true
        } else {
           this.columnDisabled = false
        }
      },immediate:true
    }
  },
  methods: {
    Checkboxchange(currentValue, type) {
      this.columnDisabled = false
      //货币大写
      if (type == 'monCap' && currentValue) {
        this.columnDisabled = true
        this.CombinedColumnEdit.percentage = false
        this.CombinedColumnEdit.Micrometer = false
        this.CombinedColumnEdit.keepSmall = false
        this.CombinedColumnEdit.unit = ''
        this.CombinedColumnEdit.showType = ['monCap']
        this.CombinedColumnEdit.num = 0

        return
      }
      //order
      this.CombinedColumnEdit.showType = []
      this.checkboxOptions.forEach(item => {
        if (this.CombinedColumnEdit[item.key]) {
          this.CombinedColumnEdit.showType.push(item.key)
        }
      })
    },
    showDialog(item, selectList, tableName) {
      this.columnFieldList = []
      this.CombinedColumnEdit = {
        showType: [],
        num: 2,
        percentage: false,
        Micrometer: false,
        keepSmall: true,
        tableName
      }
      // 该功能只支持选择数字控件 && 字段为数字类型 进行合计
      if (selectList && selectList.length > 0) {
        selectList.forEach(selitem => {
          if (selitem.ctrlType == 'number' && selitem.columnType == 'number') {
            selitem.disabled = false
            this.areadlyList.forEach(areItem => {
              if (areItem.columnField == selitem.target) {
                selitem.disabled = true
              }
            })

            //编辑时
            if (item && item.columnField == selitem.target) {
              selitem.disabled = false
            }
            this.columnFieldList.push(selitem)
          }
        })
      }

      if (item) {
        this.CombinedColumnEdit = item
        this.CombinedColumnEdit.tableName = tableName
        if (this.CombinedColumnEdit.showType.length > 0) {
          this.CombinedColumnEdit.showType.forEach(item => {
            this.CombinedColumnEdit[item] = true
          })
        }
      }

      this.dialogCombinedColumnVisible = true
    },
    saveCombinedColumn() {
      const this_ = this
      this.$refs['ruleForm'].validate(result => {
        if (result) {
          if (
            this_.CombinedColumnEdit.showType.includes('keepSmall') &&
            typeof this_.CombinedColumnEdit.num != 'number'
          ) {
            this_.$message({
              message: `请输入保留小数位。`,
              type: 'warning'
            })
            return
          }
          if (
            !this_.CombinedColumnEdit.showType.includes('keepSmall') &&
            typeof this_.CombinedColumnEdit.num == 'number'
          ) {
            this_.CombinedColumnEdit.num = 0
          }
          this.CombinedColumnEdit.tag =
            this.CombinedColumnEdit.tableName +
            '_' +
            this.CombinedColumnEdit.columnField
          this.$emit('CombinedColumnEdit', this.CombinedColumnEdit)

          this.dialogCombinedColumnVisible = false
        } else {
          this_.$message({
            message: `有必填的内容未填写。`,
            type: 'warning'
          })
        }
      })
    },
    closeCombinedColumn() {
      this.$refs.ruleForm.resetFields()
      this.dialogCombinedColumnVisible = false
      this.CombinedColumnEdit = {}
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
}
</script>
<style lang="scss" scoped>
::v-deep {
  .inputs {
    width: 380px !important;
  }
  .select-options {
    margin-bottom: 0 !important;
  }
  .el-select {
    width: 100%;
  }
}
</style>