<template>
  <div class="app-container">
    <el-radio-group v-model="formType" size="small" @change="changeType">
      <el-radio-button label="first">订单日期设置</el-radio-button>
      <el-radio-button label="second">工程登录二次引用设置</el-radio-button>
      <el-radio-button label="third">自动预留单生成</el-radio-button>
      <el-radio-button label="fourth">库存显示规则设置</el-radio-button>
      <el-radio-button label="fifth">二次打印密码设置</el-radio-button>
      <el-radio-button label="sixth">机型类别</el-radio-button>
      <el-radio-button label="seventh">登录类型</el-radio-button>
      <el-radio-button label="eigth">权限分类</el-radio-button>
      <el-radio-button label="receipt" v-if="$checkBtnRole('receipt', $route.meta.roles)">发票</el-radio-button>
    </el-radio-group>

    <div v-show="formType === 'first'">
      <div style="margin: 40px 0 30px">
        <span>下单时间超过当天</span>
        <el-time-picker
          v-model="firstForm.input1.dictValue"
          placeholder="选择时间点"
          size="small"
          format="HH:mm"
          style="width: 150px; margin: 0 10px"
        ></el-time-picker>
        <span>的订单，订单日期计为下一天的日期</span>
      </div>
      <el-button type="primary" size="small" @click="submitForm('first')">确 定</el-button>
    </div>

    <div v-show="formType === 'second'">
      <div style="margin: 40px 0 30px">
        <div>工程登录二次引用密码设置</div>
        <div>
          <el-input
            v-model="secondForm.input1.dictValue"
            placeholder="请输入密码"
            size="small"
            style="width: 150px; margin-top: 20px"
          ></el-input>
        </div>
      </div>
      <el-button type="primary" size="small" @click="submitForm('second')">确 定</el-button>
    </div>

    <div v-show="formType === 'third'">
      <div style="margin: 40px 0 30px">
        <h4>佛山自动预留配置</h4>
        <div>预留单自动生成时间，从订单审单后，第</div>
        <el-input
          v-model="thirdForm.input1.dictValue"
          type="number"
          @mousewheel.native.prevent
          size="small"
          style="width: 150px; margin-top: 20px; margin-right: 10px"
        ></el-input>
        <span>天零时起，按商家提交订单时间顺序，自动生成预留单</span>
      </div>
      <div style="margin: 40px 0 30px">
        <h4>广州自动预留配置</h4>
        <div>预留单自动生成时间，从订单审单后，第</div>
        <el-input
          v-model="thirdForm.input2.dictValue"
          type="number"
          @mousewheel.native.prevent
          size="small"
          style="width: 150px; margin-top: 20px; margin-right: 10px"
        ></el-input>
        <span>天零时起，按商家提交订单时间顺序，自动生成预留单</span>
      </div>
      <el-button type="primary" size="small" @click="submitForm('third')">确 定</el-button>
    </div>

    <div v-show="formType === 'fourth'">
      <div style="margin: 40px 0 30px">
        <div>总可发货数 = 总库存数-总预留数-总发货申请暂扣</div>
        <div style="margin-top: 20px">订单查询库存时：</div>
        <div style="margin-top: 10px">总可发货数为0，显示无货</div>
        <div style="margin-top: 10px">
          <span>总可发货数</span>
          <el-input
            v-model="fourthForm.input1.dictValue"
            type="number"
            @mousewheel.native.prevent
            size="small"
            style="width: 100px; margin: 0 10px"
          ></el-input>
          <span>到</span>
          <el-input
            v-model="fourthForm.input2.dictValue"
            type="number"
            @mousewheel.native.prevent
            size="small"
            style="width: 100px; margin: 0 10px"
          ></el-input>
          <span>，总库存显示具体数量</span>
        </div>
        <div style="margin-top: 10px">
          <span>总可发货数</span>
          <el-input
            v-model="fourthForm.input3.dictValue"
            type="number"
            @mousewheel.native.prevent
            size="small"
            style="width: 100px; margin: 0 10px"
          ></el-input>
          <span>到</span>
          <el-input
            v-model="fourthForm.input4.dictValue"
            type="number"
            @mousewheel.native.prevent
            size="small"
            style="width: 100px; margin: 0 10px"
          ></el-input>
          <span>，总库存显示有货</span>
        </div>
        <div style="margin-top: 10px">
          <span>总可发货数大于</span>
          <el-input
            v-model="fourthForm.input5.dictValue"
            type="number"
            @mousewheel.native.prevent
            size="small"
            style="width: 100px; margin: 0 10px"
          ></el-input>
          <span>，总库存显示充足</span>
        </div>
        <div style="margin-top: 30px">发货申请查询库存时：</div>
        <div style="margin-top: 10px">
          <span>可发货数大于</span>
          <el-input
            v-model="fourthForm.input6.dictValue"
            type="number"
            @mousewheel.native.prevent
            size="small"
            style="width: 100px; margin: 0 10px"
          ></el-input>
          <span>显示充足</span>
        </div>
      </div>
      <el-button type="primary" size="small" @click="submitForm('fourth')">确 定</el-button>
    </div>

    <div v-show="formType === 'fifth'">
      <div style="margin: 40px 0 30px">
        <div>二次打印密码设置</div>
        <div>
          <el-input
            v-model="fifthForm.input1.dictValue"
            placeholder="请输入密码"
            size="small"
            style="width: 150px; margin-top: 20px"
          ></el-input>
        </div>
      </div>
      <el-button type="primary" size="small" @click="submitForm('fifth')">确 定</el-button>
    </div>

    <div v-show="formType === 'sixth'">
      <div style="margin: 40px 0 30px">
        <el-button type="primary" size="mini" @click="addShowFn">新增</el-button>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table
              v-loading="listLoading"
              :data="sixthForm"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column
                align="left"
                label="名称"
                prop="dictCode"
                min-width="160"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="备注"
                prop="remark"
                min-width="170"
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column align="center" label="操作" prop="" min-width="160" show-overflow-tooltip fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" class="textColor" @click="editFn(scope.row)">编辑</el-button>
                  <el-popconfirm
                    @onConfirm="deleFn(scope.row.sysDictId)"
                    v-if="$checkBtnRole('del', $route.meta.roles)"
                    title="这是一段内容确定删除吗？"
                  >
                    <el-button type="text" class="textColor" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div v-show="formType === 'seventh'">
      <div style="margin: 40px 0 30px">
        <el-button type="primary" size="mini" @click="addShowFn">新增</el-button>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table
              v-loading="listLoading"
              :data="seventhForm"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column
                align="left"
                label="名称"
                prop="dictCode"
                min-width="160"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="备注"
                prop="remark"
                min-width="170"
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column align="center" label="操作" prop="" min-width="160" show-overflow-tooltip fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" class="textColor" @click="editFn(scope.row)">编辑</el-button>
                  <el-popconfirm
                    @onConfirm="deleFn(scope.row.sysDictId)"
                    v-if="$checkBtnRole('del', $route.meta.roles)"
                    title="这是一段内容确定删除吗？"
                  >
                    <el-button type="text" class="textColor" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div v-show="formType === 'eigth'">
      <div style="margin: 40px 0 30px">
        <el-button type="primary" size="mini" @click="addShowFn">新增</el-button>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table
              v-loading="listLoading"
              :data="eigthForm"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column
                align="left"
                label="名称"
                prop="dictCode"
                min-width="160"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="备注"
                prop="remark"
                min-width="170"
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column align="center" label="操作" prop="" min-width="160" show-overflow-tooltip fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" class="textColor" @click="editFn(scope.row)">编辑</el-button>
                  <el-popconfirm
                    @onConfirm="deleFn(scope.row.sysDictId)"
                    v-if="$checkBtnRole('del', $route.meta.roles)"
                    title="这是一段内容确定删除吗？"
                  >
                    <el-button type="text" class="textColor" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div v-show="formType === 'receipt'">
      <div style="margin: 40px 0 30px">
        <el-date-picker
          v-model="value1"
          size="mini"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          :picker-options="setDisabled"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin: 0 10px"
        >
        </el-date-picker>
        <el-button size="mini" type="warning" icon="el-icon-finished" @click="updateReceipt">更新发票</el-button>
      </div>
    </div>

    <!-- //弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogForm" width="30%" :show-close="false" :close-on-click-modal="false">
      <el-form size="mini" ref="addForm" :rules="rules" :model="addForm" label-width="120px">
        <el-form-item label="名称" prop="dictCode">
          <el-input v-model="addForm.dictCode"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelFn">取 消</el-button>
        <el-button size="mini" type="primary" @click="addDataFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictList, editDictList, addDictList, deleDictList, updateReceipt } from '@/api/common'

export default {
  data() {
    return {
      listLoading: false, // 列表加载loading
      rules: {
        dictCode: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
      addForm: {
        dictCode: '',
        remark: ''
      },
      dialogForm: false,
      title: '新增',
      formType: 'first',
      firstForm: {
        input1: {}
      },
      secondForm: {
        input1: {}
      },
      thirdForm: {
        input1: {},
        input2: {}
      },
      fourthForm: {
        input1: {},
        input2: {},
        input3: {},
        input4: {},
        input5: {},
        input6: {}
      },
      fifthForm: {
        input1: {}
      },
      sixthForm: [],
      seventhForm: [],
      eigthForm: [],
      value1: '',
      choiceDate: '',
      setDisabled: {
        disabledDate: time => {
          if (this.choiceDate) {
            const res = 13 * 24 * 3600 * 1000
            const minTime = this.choiceDate - res
            const maxTime = this.choiceDate + res
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        },
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime()
          if (maxDate) this.choiceDate = ''
        }
      }
    }
  },
  created() {
    this.getDetail('first')
  },
  methods: {
    //删除
    async deleFn(id) {
      await deleDictList({ id: id })
      this.$message.success('删除成功')
      this.getDetail(this.formType)
    },
    //编辑
    editFn(value) {
      this.$nextTick(() => {
        this.title = '编辑'
        this.addForm.dictCode = value.dictCode
        this.addForm.remark = value.remark
        this.addForm.sysDictId = value.sysDictId
        this.addForm.dictType = value.dictType
      })

      this.dialogForm = true
    },
    //弹窗确定
    async addDataFn() {
      // console.log(this.addForm);

      await this.$refs.addForm.validate()

      if (this.addForm.sysDictId) {
        //编辑
        await editDictList([
          {
            ...this.addForm
          }
        ])
        this.$message.success('编辑成功')
      } else {
        let type = ''
        if (this.formType == 'sixth') {
          type = 'MACHINE_TYPE'
        } else if (this.formType == 'seventh') {
          type = 'SIGN_TYPE'
        } else {
          type = 'POWER_CATEGORY'
        }
        await addDictList({
          ...this.addForm,
          dictValue: this.addForm.dictCode,
          dictType: type
        })
        this.$message.success('新增成功')
      }
      this.getDetail(this.formType)

      this.addForm = {
        dictCode: '',
        remark: ''
      }
      this.dialogForm = false
    },
    //cancelFn 弹窗取消
    async cancelFn() {
      await this.$refs.addForm.resetFields()

      this.addForm = {
        dictCode: '',
        remark: ''
      }
      this.dialogForm = false
      // this.addForm.dictCode ='';
    },
    //展示新增弹窗
    addShowFn() {
      this.title = '新增'
      this.dialogForm = true
    },
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true
    },

    changeType(val) {
      if (this.formType === 'receipt') return
      console.log(val)
      this.getDetail(val)
    },
    getDictList(e, type) {
      getDictList({ sysDictEnum: e }).then(res => {
        console.log(res, '99')
        let data = res.data.map(item => {
          return {
            sysDictId: item.sysDictId,
            dictValue: item.dictValue,
            dictType: item.dictType,
            dictCode: item.dictCode
          }
        })
        if (type != 'fourth') {
          if (e === 'FO_SHAN_RESERVED_DAY') {
            this[type + 'Form'].input1 = data[0]
            return
          } else if (e === 'GUANG_ZHOU_RESERVED_DAY') {
            this[type + 'Form'].input2 = data[0]
            return
          }
          this[type + 'Form'].input1 = data[0]
          // this[type + "Form"].input2 = data[1];
          console.log(777, this[type + 'Form'].input1)
        } else {
          this[type + 'Form'].input1 = data[0]
          this[type + 'Form'].input2 = data[1]
          this[type + 'Form'].input3 = data[2]
          this[type + 'Form'].input4 = data[3]
          this[type + 'Form'].input5 = data[4]
          this[type + 'Form'].input6 = data[5]
        }
        if (type == 'sixth') {
          this.sixthForm = res.data
        }
        if (type == 'seventh') {
          this.seventhForm = res.data
        }
        if (type == 'sixth') {
          this.sixthForm = res.data
        }
        if (type == 'seventh') {
          this.seventhForm = res.data
        }
        if (type == 'eigth') {
          this.eigthForm = res.data
        }
      })
    },
    getDetail(type) {
      const MAP = {
        first: 'ORDER_TIME_LIMIT',
        second: 'ENGIN_TWO_PWD',
        third: ['GUANG_ZHOU_RESERVED_DAY', 'FO_SHAN_RESERVED_DAY'],
        fourth: 'STOCK_ORDER',
        fifth: 'PRINT_PASSWORD',
        sixth: 'MACHINE_TYPE',
        seventh: 'SIGN_TYPE',
        eigth: 'POWER_CATEGORY'
      }
      if (type === 'third') {
        MAP[type].forEach(e => {
          this.getDictList(e, type)
        })
        return
      }
      this.getDictList(MAP[type], type)
    },

    submitForm(type) {
      let list = []
      for (var key in this[type + 'Form']) {
        console.log(this[type + 'Form'], this[type + 'Form'][key].dictValue)
        if (!this[type + 'Form'][key].dictValue) {
          return this.$errorMsg('请完善信息')
        }
        list.push(this[type + 'Form'][key])
      }
      console.log(list, '890')

      editDictList(list).then(res => {
        this.$successMsg('保存成功')
        this.getDetail(type)
      })
    },
    updateReceipt() {
      if (!this.value1) {
        this.$errorMsg('请选择时间')
        return
      }
      updateReceipt({
        startTime: this.value1[0],
        endTime: this.value1[1]
      }).then(res => {
        this.$successMsg('已更新')
        this.value1 = ''
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  color: #333333;
  font-size: 14px;
}
</style>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 80px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
