<template>
  <view>
    <Navbar title="下发处罚单" />
    <div class="content">
      <u-form :model="formData" :rules="rules" ref="uForm" labelWidth="auto">
        <u-form-item label="违章编号" prop="violationCode">
          <u-input v-model="formData.violationCode" placeholder="违章编号" border="bottom" disabled></u-input>
        </u-form-item>
        <u-form-item label="签发人" prop="signerName">
          <u-input v-model="formData.signerName" placeholder="签发人" border="bottom" disabled></u-input>
        </u-form-item>
        <u-form-item label="发现人" prop="createUserName">
          <u-input v-model="formData.createUserName" placeholder="发现人" border="bottom" disabled></u-input>
        </u-form-item>
        <u-form-item label="责任承包商" prop="consName">
          <u-input v-model="formData.consName" placeholder="责任承包商" border="bottom" disabled></u-input>
        </u-form-item>
        <u-form-item label="责任人" prop="personName">
          <u-input v-model="formData.personName" placeholder="责任人" border="bottom" disabled></u-input>
        </u-form-item>
        <u-form-item label="违章类型" prop="violationTypeName">
          <u-input v-model="formData.violationTypeName" placeholder="违章类型" border="bottom" disabled></u-input>
        </u-form-item>
        <u-form-item label="监督部门" prop="deptName" required>
          <u-cell-group :border="false">
            <u-cell
              :title="formData.deptName"
              isLink
              :label="formData.deptName ? '' : '请选择监督部门'"
              @click="handlePicker(1)"
            ></u-cell>
          </u-cell-group>
        </u-form-item>
        <u-form-item label="监督人" prop="supervisorName" required>
          <u-cell-group :border="false">
            <u-cell
              :title="formData.supervisorName"
              isLink
              :label="formData.supervisorName ? '' : '请选择监督人'"
              @click="handlePicker(2)"
              :disabled="!formData.deptName"
            ></u-cell>
          </u-cell-group>
        </u-form-item>
        <u-form-item label="处罚金额" prop="money" required>
          <u-input
            v-model="formData.money"
            type="number"
            placeholder="请输入处罚金额"
            border="bottom"
            @blur="violationAmountUpper"
          ></u-input>
          元
        </u-form-item>
        <u-form-item label="大写" prop="moneyUpper" required>
          <u-input v-model="formData.moneyUpper" placeholder="大写" border="bottom" disabled></u-input>
        </u-form-item>
        <u-form-item label="处罚原因" prop="punishmentReason" required>
          <u-textarea
            v-model="formData.punishmentReason"
            placeholder="请输入处罚原因"
            :rows="5"
            maxlength="1000"
            count
          ></u-textarea>
        </u-form-item>
        <u-form-item label="处罚依据" prop="punishmentBasis" required>
          <u-textarea
            v-model="formData.punishmentBasis"
            placeholder="请输入处罚依据"
            :rows="5"
            maxlength="1000"
            count
          ></u-textarea>
        </u-form-item>
        <u-form-item label="备注" prop="remark">
          <u-textarea v-model="formData.remark" placeholder="请输入备注" :rows="5" maxlength="1000" count></u-textarea>
        </u-form-item>
      </u-form>

      <u-button class="btn" type="primary" shape="circle" @click="submitForm">确 定</u-button>
    </div>

    <!-- 下拉 -->
    <u-picker
      v-if="showPicker"
      :show="showPicker"
      :columns="supervisorOpts"
      keyName="label"
      @cancel="showPicker = false"
      @confirm="confirm"
    ></u-picker>
    <ba-tree-picker
      ref="treePicker"
      :multiple="false"
      @select-change="changeDept"
      title="选择部门"
      :localdata="supervisionDepOpts"
      valueKey="id"
      textKey="label"
      childrenKey="children"
    />

    <u-loading-page :loading="isLoading" icon-size="39" style="z-index: 99999"></u-loading-page>
  </view>
</template>

<script>
import config from '@/config'
import { numberToChinese } from '@/utils/bonus'
import { getViolationDetail, deptTreeSelect, getDeptUserSelect, addIssueFine } from '@/api/hiddenDangerViolation'

export default {
  data() {
    return {
      isLoading: false,
      opt: {},
      currentPicker: 1,
      showPicker: false,
      formData: {
        violationId: '', // 违章id
        violationCode: '', // 处罚单号
        signerId: uni.getStorageSync('userInfo').userId, // 签发人id
        signerName: uni.getStorageSync('userInfo').nickName, // 签发人
        createUserName: '', // 发现人
        consName: '', // 责任承包商
        personName: '', // 承包商负责人
        violationTypeName: '', // 违章类型
        deptId: '', // 监督部门id
        deptName: '', // 监督部门
        supervisorId: '', // 监督人id
        supervisorName: '', // 监督人
        money: '', // 处罚金额
        moneyUpper: '', // 处罚金额大写
        punishmentReason: '', // 处罚原因
        punishmentBasis: '', // 处罚依据
        remark: '' // 备注
      },
      // 监督部门-下拉
      supervisionDepOpts: [],
      // 监督人-下拉
      supervisorOpts: [],
      rules: {
        deptName: [{ required: true, message: '请选择监督部门', trigger: 'change' }],
        supervisorName: [{ required: true, message: '请选择监督人', trigger: 'change' }],
        money: [{ required: true, message: '请输入处罚金额', trigger: 'change' }],
        punishmentReason: [{ required: true, message: '请输入处罚原因', trigger: 'change' }],
        punishmentBasis: [{ required: true, message: '请输入处罚依据', trigger: 'change' }]
      }
    }
  },
  onLoad(opt) {
    this.opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ this.opt:', this.opt)
    this.getDetail()
    this.getDeptTreeSelect()
  },
  methods: {
    // 编辑/详情
    async getDetail() {
      try {
        const params = { violationId: this.opt.violationId }
        console.log('🚀 ~ getDetail ~ params:', params)
        const res = await getViolationDetail(params)
        console.log('🚀 ~ getDetail ~ res:', res)
        this.formData = { ...this.formData, ...res.data }
      } catch (error) {
        console.log('🚀 ~ getDetail ~ error:', error)
      }
    },
    // 部门-树形下拉
    async getDeptTreeSelect() {
      try {
        const res = await deptTreeSelect()
        this.supervisionDepOpts = res.data
        console.log('🚀 ~ 树 ~ deptOpts:', this.deptOpts)
      } catch (error) {
        console.log('获取整改验收部门-树形下拉失败', error)
      }
    },
    changeDept(ids, label) {
      console.log('🚀 ~ changeDept ~ 树:', ids, label)
      this.formData.deptId = ids[0]
      this.formData.deptName = label
      console.log('🚀 ~ changeDept ~ this.formData:', this.formData)
      this.getDeptUserSelect(ids[0])
    },
    // 监督人-下拉
    async getDeptUserSelect(val) {
      try {
        this.formData.supervisorId = ''
        this.formData.supervisorName = ''
        this.supervisorOpts = []
        const params = {
          deptId: val
        }
        const res = await getDeptUserSelect(params)
        console.log('🚀 ~ 人员下拉 ~ res:', res)
        this.supervisorOpts = [res.data]
      } catch (error) {
        console.log('获取整改接收人-下拉失败', error)
      }
    },
    // 处理大写
    violationAmountUpper() {
      // 将金额转换为大写
      this.formData.moneyUpper = numberToChinese(this.formData.money)
      console.log('🚀 ~ violationAmountUpper ~ this.formData.moneyUpper:', this.formData.moneyUpper)
    },
    handlePicker(type) {
      this.currentPicker = type
      if (type === 1) {
        // 清空监督人
        this.formData.supervisorId = ''
        this.formData.supervisorName = ''
        this.$refs.treePicker._show()
      } else if (type === 2) {
        this.showPicker = true
      }
    },
    confirm(e) {
      console.log('🚀 ~ confirm ~ e:', e)
      if (this.currentPicker === 2) {
        this.formData.supervisorName = e.value[0].label
        this.formData.supervisorId = e.value[0].value
      }
      this.showPicker = false
    },
    async submitForm() {
      this.$refs.uForm.validate().then(async valid => {
        try {
          this.isLoading = true
          this.formData.type = 1
          console.log('🚀 ~ 提交 ~ this.formData:', this.formData)
          const res = await addIssueFine(this.formData)
          console.log('🚀 ~ submit ~ res:', res)
          uni.showToast({
            title: '提交成功',
            icon: 'success',
            duration: 1500
          })
          setTimeout(() => {
            this.isLoading = false
            uni.navigateBack()
          }, 1500)
        } catch (error) {
          console.log('🚀 ~ submit ~ error:', error)
          this.isLoading = false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 20px;
  padding-bottom: 20px;
  .btn {
    margin: 20px 0;
  }
}
</style>
