<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 v-if="$checkBtnRole('receipt', $route.meta.roles)" label="receipt">发票</el-radio-button>
      <el-radio-button label="warehouse">仓租费配置</el-radio-button>
      <el-radio-button label="radius">商用登录地图半径</el-radio-button>
<!--      <el-radio-button label="forcedHold">强制仓</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"
        />
        <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"
          />
        </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"
          size="small"
          style="width: 150px; margin-top: 20px; margin-right: 10px"
          @mousewheel.native.prevent
        />
        <span>天零时起，按商家提交订单时间顺序，自动生成预留单</span>
      </div>
      <div style="margin: 40px 0 30px">
        <h4>广州自动预留配置</h4>
        <div>预留单自动生成时间，从订单审单后，第</div>
        <el-input
          v-model="thirdForm.input2.dictValue"
          type="number"
          size="small"
          style="width: 150px; margin-top: 20px; margin-right: 10px"
          @mousewheel.native.prevent
        />
        <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"
            size="small"
            style="width: 100px; margin: 0 10px"
            @mousewheel.native.prevent
          />
          <span>到</span>
          <el-input
            v-model="fourthForm.input2.dictValue"
            type="number"
            size="small"
            style="width: 100px; margin: 0 10px"
            @mousewheel.native.prevent
          />
          <span>，总库存显示具体数量</span>
        </div>
        <div style="margin-top: 10px">
          <span>总可发货数</span>
          <el-input
            v-model="fourthForm.input3.dictValue"
            type="number"
            size="small"
            style="width: 100px; margin: 0 10px"
            @mousewheel.native.prevent
          />
          <span>到</span>
          <el-input
            v-model="fourthForm.input4.dictValue"
            type="number"
            size="small"
            style="width: 100px; margin: 0 10px"
            @mousewheel.native.prevent
          />
          <span>，总库存显示有货</span>
        </div>
        <div style="margin-top: 10px">
          <span>总可发货数大于</span>
          <el-input
            v-model="fourthForm.input5.dictValue"
            type="number"
            size="small"
            style="width: 100px; margin: 0 10px"
            @mousewheel.native.prevent
          />
          <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"
            size="small"
            style="width: 100px; margin: 0 10px"
            @mousewheel.native.prevent
          />
          <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"
          />
        </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
                align="left"
                label="备注"
                prop="remark"
                min-width="170"
                show-overflow-tooltip
              />

              <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
                    v-if="$checkBtnRole('del', $route.meta.roles)"
                    title="这是一段内容确定删除吗？"
                    @confirm="deleFn(scope.row.sysDictId)"
                  >
                    <el-button slot="reference" type="text" class="textColor">删除</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
                align="left"
                label="备注"
                prop="remark"
                min-width="170"
                show-overflow-tooltip
              />

              <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
                    v-if="$checkBtnRole('del', $route.meta.roles)"
                    title="这是一段内容确定删除吗？"
                    @confirm="deleFn(scope.row.sysDictId)"
                  >
                    <el-button slot="reference" type="text" class="textColor">删除</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
                align="left"
                label="备注"
                prop="remark"
                min-width="170"
                show-overflow-tooltip
              />

              <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
                    v-if="$checkBtnRole('del', $route.meta.roles)"
                    title="这是一段内容确定删除吗？"
                    @confirm="deleFn(scope.row.sysDictId)"
                  >
                    <el-button slot="reference" type="text" class="textColor">删除</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-button size="mini" type="warning" icon="el-icon-finished" @click="updateReceipt">更新发票</el-button>
      </div>
    </div>
    <div v-show="formType === 'warehouse'">
      <div style="margin: 40px 0 30px;">
        <span>总库存大于</span>
        <el-input
          v-model.number="stockCostDict.dictValue"
          type="number"
          style="width: 150px; margin: 0 10px"
          placeholder=""
          size="mini"
        />
        <span>才开始标记计算经销商订单相应机型仓租费用</span>
      </div>
      <el-button type="primary" size="small" @click="submitStockForm">确 定</el-button>
    </div>
    <div v-show="formType === 'radius'">
      <div style="margin: 40px 0 30px;">
        <span>商用工程登录信息的工程半径配置</span>
        <el-input
          v-model="radiusForm.input1.dictValue"
          style="width: 150px; margin: 0 10px"
          placeholder=""
          size="mini"
        />
        <span>公里</span>
      </div>
      <el-button type="primary" size="small" @click="submitForm('radius')">确 定</el-button>
    </div>
    <div v-show="formType === 'forcedHold'">
      <div style="margin: 40px 0 30px;">
        <el-form ref="form" :model="forcedHoldForm" label-width="50px" label-position="left">
          <el-row>
            <el-col>
              <el-form-item label="仓库">
                <el-select
                  v-model="forcedHoldForm.warehouse"
                  style="width: 50%"
                  placeholder="请选择仓库"
                  size="mini"
                  @change="()=> this.forcedHoldForm.category = []"
                >
                  <el-option
                    v-for="item in warehouseList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="品类">
                <el-checkbox-group v-model="forcedHoldForm.category">
                  <el-checkbox v-for="item in categoryList" :key="item.id" :label="item.id">{{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-button type="primary" size="small" @click="submitForcedHold">确 定</el-button>
      <el-button
        size="small"
        @click="handleDel"
      >重置
      </el-button>

    </div>
    <!-- //弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogForm" width="30%" :show-close="false" :close-on-click-modal="false">
      <el-form ref="addForm" size="mini" :rules="rules" :model="addForm" label-width="120px">
        <el-form-item label="名称" prop="dictCode">
          <el-input v-model="addForm.dictCode" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark" />
        </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,
  getStockCostDict,
  updateStockCostDict, getStockForceDetail, updateStockForceDetail,
  delTockForceDetail
} from '@/api/common'
import { getKingDeeCategory } from '@/api/basic_data/material'
import { getListStockV2 } from '@/api/basic_data/warehouse'

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: {}
      },
      radiusForm: {
        input1: {}
      },
      forcedHoldForm: {
        warehouse: '',
        category: []
      },
      stockCostDict: {},
      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 = ''
        }
      },
      categoryList: [],
      warehouseList: []
    }
  },
  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
    },
    // 获取品类数据
    async getCategoryList() {
      const res = await getKingDeeCategory()
      this.categoryList = res.data
    },
    // 获取仓库列表
    getListStockV2() {
      getListStockV2({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.warehouseList = res.data.records
      })
    },
    getStockForceDetail() {
      getStockForceDetail().then(res => {
        this.forcedHoldForm = {
          warehouse: res.data?.stockCorrespondId || '',
          category: res.data?.stockForceCategories.map(k => k.categoryId) || []
        }
      })
    },
    changeType(val) {
      if (this.formType === 'receipt') return
      if (val === 'warehouse') {
        this.getStockCostDict()
        return
      }
      if (val === 'forcedHold') {
        this.getListStockV2()
        this.getCategoryList()
        this.getStockForceDetail()
        return
      }
      this.getDetail(val)
    },
    getStockCostDict() {
      getStockCostDict().then(res => {
        res.data.dictValue = +res.data.dictValue
        this.stockCostDict = res.data
      })
    },
    getDictList(e, type) {
      getDictList({ sysDictEnum: e }).then(res => {
        const 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]
          console.log(this[type + 'Form'].input1, 999)
          // this[type + "Form"].input2 = data[1];
        } 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',
        radius: 'MAP_ENGIN_RATE'
      }
      if (type === 'third') {
        MAP[type].forEach(e => {
          this.getDictList(e, type)
        })
        return
      }
      this.getDictList(MAP[type], type)
    },

    submitForm(type) {
      const 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])
      }

      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 = ''
      })
    },
    handleDel() {
      delTockForceDetail().then(res => {
        this.getStockForceDetail()
        this.$successMsg('重置成功')
      })
    },
    submitForcedHold() {
      if (!this.forcedHoldForm.warehouse) {
        this.$errorMsg('请选择仓库')
        return
      }
      if (!this.forcedHoldForm.category.length) {
        this.$errorMsg('请选择品类')
        return
      }
      const temp = this.warehouseList.find(k => k.id === this.forcedHoldForm.warehouse)
      const stockForceCategories = this.forcedHoldForm.category.map(k => {
        return {
          categoryId: k,
          correspondId: temp.id,
          correspondName: temp.name
        }
      })
      updateStockForceDetail({
        stockCorrespondId: temp.id,
        stockCorrespondName: temp.name,
        stockForceCategories
      }).then(_res => {
        this.getStockForceDetail()
        this.$successMsg('操作成功')
      })
    },
    submitStockForm() {
      if (!this.stockCostDict.dictValue) {
        this.$errorMsg('请输入总库存')
        return
      }
      updateStockCostDict({ dictValue: this.stockCostDict.dictValue }).then(_res => {
        this.getStockCostDict()
        this.$successMsg('已更新')
      })
    }
  }
}
</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>
