<template>
  <super-dialog
    v-bind="$attrs"
    v-model="isShowDialog"
    :width="width"
    :modal="false"
    :top="top"
    @open="open"
    @closed="closed"
    title="救援费用信息"
  >
    <div class="eventInfo-dialog" :style="{height}">
      <div class="form-module">
        <el-form
          ref="addEditForm"
          :model="addEditForm"
          :rules="rules"
          label-width="100px"
          label-position="top"
          label-suffix="："
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="救援单" prop="rescueNo">
                <el-input
                  clearable
                  v-model="addEditForm.rescueNo"
                  placeholder="点击选择救援单"
                  readonly
                  class="el-click-input"
                  @click.native="showDialog()"
                  suffix-icon="el-icon-search"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="夜间作业" prop="nightHomeWork">
                <el-switch
                  v-model="addEditForm.nightHomeWork"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="危险货物" prop="dangerousGoods">
                <el-switch
                  v-model="addEditForm.dangerousGoods"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="隧道作业" prop="tunnelWork">
                <el-switch
                  v-model="addEditForm.tunnelWork"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="交通事故" prop="trafficAccident">
                <el-switch
                  v-model="addEditForm.trafficAccident"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="拖移里程" prop="trailingMileage">
                <el-input
                  type="number"
                  v-model.number="addEditForm.trailingMileage"
                  placeholder="请输入拖移里程"
                >
                  <i slot="suffix" class="input-unit">KM</i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障车型" prop="carType">
                <el-select
                  v-model="addEditForm.carType"
                  placeholder="请选择故障车型"
                >
                  <el-option
                    v-for="item in getDictionaryByCode('gzcx')"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收费类型" prop="costType">
                <el-select
                  v-model="addEditForm.costType"
                  placeholder="请选择收费类型"
                >
                  <el-option label="救援收费" value="1"> </el-option>
                  <el-option label="返空收费" value="2"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付方式" prop="payType">
                <el-select
                  v-model="addEditForm.payType"
                  placeholder="请选择支付方式"
                >
                  <el-option label="线下支付" value="1"> </el-option>
                  <el-option label="线上支付" value="2"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="救援费用" prop="shouldMoney">
                <el-input
                  type="number"
                  v-model.number="addEditForm.shouldMoney"
                  placeholder="请输入救援费用"
                >
                  <i slot="suffix" class="input-unit">元</i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实收金额" prop="actualMoney">
                <el-input
                  type="number"
                  v-model.number="addEditForm.actualMoney"
                  placeholder="请输入实收金额"
                >
                  <i slot="suffix" class="input-unit">元</i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="票据号码" prop="invoiceNo">
                <el-input
                  v-model="addEditForm.invoiceNo"
                  placeholder="请输入票据号码"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  :autosize="{minRows: 2, maxRows: 4}"
                  placeholder="请输入"
                  v-model="addEditForm.remark"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="content-bottom">
          <el-button size="small" @click="isShowDialog = false">
            取 消
          </el-button>
          <el-button
            :disabled="saveLoading"
            size="small"
            type="primary"
            @click="handleSave"
          >
            确 定
          </el-button>
          <el-button size="small" type="primary" @click="handleAdd">
            添加救援单</el-button
          >
        </div>
      </div>
    </div>
    <rescueListDialog
      :eventId="itemDetail.eventId"
      :is-show.sync="rescueDialogVisible"
      @confirm="handleRescueSelect"
    />
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {getDictionaryByCode} from '@/utils/dictionary'
import rescueListDialog from './rescueListDialog.vue'
import moment from 'moment'
import {
  rescueFeeEdit,
  rescueFeeAdd,
  rescueInfoData
} from '@/api/patrolAndRescue/commandDispatch/eventManagement/eventEdit'
export default {
  name: 'rescueCostDialog',
  inheritAttrs: false,
  components: {
    rescueListDialog,
    SuperDialog
  },
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    top: {
      default: '14vh',
      type: String
    },
    width: {
      default: '60%',
      type: String
    },
    height: {
      default: '65vh',
      type: String
    },
    confirmCloseDialog: {
      default: true,
      type: Boolean
    },
    itemDetail: {
      default: () => {},
      type: Object
    }
  },

  data() {
    return {
      addEditForm: {},
      rules: {
        rescueNo: [
          {
            required: true,
            message: '救援单不能为空',
            trigger: ['change', 'blur']
          }
        ],
        trailingMileage: [
          {
            required: true,
            message: '拖移里程不能为空',
            trigger: ['change', 'blur']
          }
        ],
        carType: [
          {
            required: true,
            message: '故障车型不能为空',
            trigger: ['change', 'blur']
          }
        ],
        costType: [
          {
            required: true,
            message: '收费类型不能为空',
            trigger: ['change', 'blur']
          }
        ],
        payType: [
          {
            required: true,
            message: '支付方式不能为空',
            trigger: ['change', 'blur']
          }
        ],
        // nightHomeWork: [
        //   {
        //     required: true,
        //     message: '夜间作业不能为空',
        //     trigger: ['change', 'blur']
        //   }
        // ],
        // dangerousGoods: [
        //   {
        //     required: true,
        //     message: '危险货物不能为空',
        //     trigger: ['change', 'blur']
        //   }
        // ]
        // tunnelWork: [
        //   {
        //     required: true,
        //     message: '隧道作业不能为空',
        //     trigger: ['change', 'blur']
        //   }
        // ],
        // trafficAccident: [
        //   {
        //     required: true,
        //     message: '交通事故不能为空',
        //     trigger: ['change', 'blur']
        //   }
        // ],
        shouldMoney: [
          {
            required: true,
            message: '救援费用不能为空',
            trigger: ['change', 'blur']
          }
        ],
        actualMoney: [
          {
            required: true,
            message: '实收金额不能为空',
            trigger: ['change', 'blur']
          }
        ]
      },
      saveLoading: false,
      rescueDialogVisible: false
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  methods: {
    getDictionaryByCode,
    handleAdd() {
      this.$router.push({
        name: 'rescueRegistration'
      })
    },
    // 打开弹层时触发
    open() {
      const {eventId, id, carType, ...rest} = this.itemDetail

      if (id) {
        this.addEditForm = {
          id,
          carType: carType ? carType + '' : '',
          eventId,
          ...rest
        }
      } else {
        this.addEditForm = {
          eventId,
          trailingMileage: 0,
          carType: '1',
          costType: '1',
          payType: '1'
        }
      }
    },
    // 展示弹层
    showDialog() {
      this.rescueDialogVisible = true
    },
    handleRescueSelect(data) {
      this.addEditForm.rescueId = data.id
      this.$set(this.addEditForm, 'rescueNo', data.rescueNo)
      this.rescueDialogVisible = false
    },

    handleSave() {
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          const query = {...this.addEditForm}
          query.costTime = moment().format('YYYY-MM-DD HH:mm:ss')

          const api = query.id ? rescueFeeEdit : rescueFeeAdd
          const type = query.id ? '编辑' : '新增'
          try {
            const {state, value, message} = await api(query)
            if (state) {
              this.$message.success('救援费用' + type + '成功')
              this.$emit('reload')
              this.isShowDialog = false
            } else {
              this.$message.error(message || '救援费用' + type + '失败')
            }
          } catch (error) {
            this.$message.error(error || '救援费用' + type + '失败')
          } finally {
            this.saveLoading = false
          }
        }
      })
    },
    // 关闭弹层触发
    closed() {
      const {orgData} = this
      // 重置data中的数据
      Object.assign(this.$data, this.$options.data.call(this), {orgData})
      this.$nextTick(() => {
        this.$refs.addEditForm?.clearValidate()
      })
      if (this.confirmCloseDialog) this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

.eventInfo-dialog {
  width: 100%;
  display: flex;
  flex-direction: column;
  column-gap: 16px;
  min-height: 50vh;

  .form-module {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    background-color: $--system-module-color1;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;

    .el-form {
      height: calc(100% - 40px);
      overflow-y: scroll;
    }

    .content-bottom {
      display: flex;
      justify-content: flex-end;
      height: 40px;
    }
  }
}

::v-deep::-webkit-scrollbar-thumb,
::v-deep::-webkit-scrollbar {
  display: none;
}
.input-unit {
  font-size: 14px;
  color: #e4e4e4;
  margin: 0 5px;
  font-style: normal;
}
</style>
