<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="feeInfoDialogFlag"
    title="报工信息"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel">
    <el-form v-if="dialogType=='view'" ref="form" :rules="rules" :model="form" label-width="120px">
      <headerTitle title="基础信息"></headerTitle>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务类型" prop="taskType">
            <DictSelection clearable dictName="派车任务类型" v-model="form.taskType"
                           :disabled="dialogType==='view'"
                           disabled
                           @itemChange="(val)=>handleChangeFinLink(val)"></DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单据名称" prop="taskCode">
            <el-input v-model="form.taskCode" disabled @click.native="(val)=>handleSelectData(val)"
                      clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌号" prop="trakNumber">
            <el-input disabled v-model="form.trakNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="司机" prop="driverName">
            <el-input disabled v-model="form.driverName"></el-input>
          </el-form-item>


        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="里程" prop="mileage">
            <el-input type="number" disabled :min="0" v-model="form.mileage" clearable>
              <template slot="append">KM</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="mileage">
            <el-input v-model="form.phone" disabled clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="计费方式" prop="billingMethod">
            <el-select v-model="form.billingMethod" placeholder="请选择" style="width: 100%" disabled>
              <el-option v-for="item in billingMethodList" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总费用" prop="totalCost">
            <el-input v-model="form.totalCost" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单价" prop="price">
            <el-input-number :controls="false" style="width: 100%" :min="0" v-model="form.price" disabled></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数量" prop="quantity">
            <el-input type="number" :controls="false" style="width: 100%" :min="0" v-model="form.quantity"
                      disabled>
              <template v-if="form.billingMethod==1" slot="append">m³</template>
              <template v-else-if="form.billingMethod==2" slot="append">KG</template>
              <template v-else slot="append">辆车</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出发地" prop="startPlace">
            <el-input v-model="form.startPlace" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的地" prop="endPlace">
            <el-input v-model="form.endPlace" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="realStartTime">
            <el-date-picker
              v-model="form.realStartTime"
              :picker-options="{disabledDate:(time)=>{return form.realEndTime&&time.getTime()>new Date(form.realEndTime)}}"
              type="datetime"
              disabled
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完成时间" prop="realEndTime">
            <el-date-picker
              v-model="form.realEndTime"
              :picker-options="{disabledDate:(time)=>{return form.realStartTime&&time.getTime()<new Date(form.realStartTime)}}"
              type="datetime"
              disabled
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" disabled v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form v-else ref="form" :rules="rules" :model="form" class="el-form-box">
      <headerTitle title="基础信息"></headerTitle>
     <el-row>
       <el-col :span="12">
         <el-form-item label="里程" prop="mileage" label-width="50px">
           <el-input type="number" v-model="form.mileage" clearable :disabled="dialogType=='view'">
             <template slot="append">KM</template>
           </el-input>
         </el-form-item>
       </el-col>
     </el-row>


    <headerTitle title="费用信息"></headerTitle>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="form.costList"
      :needPage="false"
      :toolkit="[]"
      :minHeight="100"
      tool-class="ele-toolbar-form"
      cache-key="eomContactPageTable"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          v-if="dialogType!='view'"
          @click="handleAddInfo">
          新增费用
        </el-button>
      </template>

      <template v-slot:action="{row,$index}">
        <el-popconfirm
          class="ele-action"
          title="确定要删除此信息吗？"
          @confirm="handleDelInfo($index)">
          <template v-slot:reference>
            <el-link
              type="danger"
              :underline="false"
              icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
      <template v-slot:costType="{row,$index}" v-if="dialogType!='view'">
        <el-form-item :prop="'costList.'+$index+'.costType'"
                      :rules="{required:true,message:'请选择费用类型',trigger:['blur','change']}">
          <DictSelection clearable dictName="计划工单费用类型" v-model="row.costType"
                         @itemChange="(val)=>handleChangeFinLink(val,row,$index)"></DictSelection>
        </el-form-item>
      </template>
      <template v-slot:cost="{row,$index}" v-if="dialogType!='view'">
        <el-form-item :prop="'costList.'+$index+'.cost'"
                      :rules="{required:true,message:'请输入金额',trigger:['blur','change']}">
          <el-input-number :precision="2" :controls="false" :min="0" v-model="row.cost"
                           style="width: 100%"></el-input-number>
        </el-form-item>

      </template>
      <template v-slot:remark="{row,$index}" v-if="dialogType!='view'">
        <el-input v-model="row.remark"></el-input>
      </template>
      <template v-slot:headerGLLXMC="{column}">
        <span class="is-required">{{ column.label }}</span>
      </template>
    </ele-pro-table>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="handleSave" v-if="dialogType!='view'">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>


<script>


import {logisticlistcostGetByIdAPI, logistictraklistnoteUpdateAPI} from "@/api/transportManager/shipManage/taskWork";
import {deepClone} from "@/utils";
import {mapGetters} from 'vuex';

export default {
  name: "feeInfoDialog",
  components: {},

  props: {
    feeInfoDialogFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editIndex: undefined,//当前修改数据的下标
      billingMethodList: [
        {
          label: '按方计费',
          value: '1',
        },
        {
          label: '按重量计费',
          value: '2',
        },
        {
          label: '专车计费',
          value: '3',
        },
      ],
      form: {
        mileage:'',
        costList: []
      },
      dialogType: '',
      rules:{
        mileage:{required:true,message:'请输入',trigger:'blur'}
      },
      currentRow: {}
    }
  },
  computed: {
    ...mapGetters(['getDictValue']),
    columns() {
      let list = [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'costType',
          label: '费用类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'costType',
          headerSlot: 'headerGLLXMC',
          formatter: (row, column) => {
            return this.getDictValue('计划工单费用类型', row.costType)
          }
        },
        {
          prop: 'cost',
          label: '金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
          slot: 'cost',
          headerSlot: 'headerGLLXMC'
        },
        {
          prop: 'remark',
          label: '备注',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
          slot: 'remark',
        },
      ]
      let action = [{
        columnKey: 'action',
        slot: 'action',
        label: '操作',
        resizable: false,
        width: 80,
        align: 'center',
        showOverflowTooltip: true,
        fixed: 'right'
      },]
      this.dialogType === 'view' ? list = [...list] : list = [...list, ...action]
      return list
    },
  },
  mounted() {
  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.dialogType = type
      this.currentRow = row
      await this.getInfo(row.id)
    },
    //获取详情
    async getInfo(id) {
      this.form = await logisticlistcostGetByIdAPI(id)
      this.form.costList.forEach((item, index) => {
        item.costType = item.costType + ''
      })
    },
    //新增关联信息数据
    handleAddInfo() {
      this.form.costList.push(
        {
          id: '',
          costType: '',
          cost: undefined,
          listId: this.currentRow.id,
          remark: '',
        }
      )
    },

    //删除关联信息数据
    handleDelInfo(index) {
      this.form.costList.splice(index, 1)
    },
    //修改关联类型
    handleChangeFinLink(val, row, index) {
      this.editIndex = index
      this.$nextTick(() => {
        this.$refs.form.clearValidate('costList.' + index + '.cost')
      })
    },
    cancel() {
      this.$emit('update:feeInfoDialogFlag', false)
    },
    //
    handleSave() {
     if( !this.form.costList.length) return this.$message.warning('请添加费用信息')
      this.$refs.form.validate(async valid => {
        if (!valid) return this.$message.warning('有必填项未填，请检查')
        this.form.status = 2
        let data = deepClone(this.form)
        await logistictraklistnoteUpdateAPI(data)
        this.$message.success('操作成功')
        this.$emit('reload')
        this.cancel()
      })
    },
  }
}
</script>


<style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 20px;
}
</style>
