<template>
  <div class="app-container" id="receiveApplyAdd">
    <el-form :model="queryParams" ref="queryForm" size="small" :rules="queryRules" :inline="true" v-show="showSearch">
      <el-row>
        <el-form-item label="领料单位" prop="unitId">
          <el-select  v-model="queryParams.unitId" filterable clearable @change="GetProData" style="width: 240px" placeholder="请选择">
            <el-option
              v-for="item in unitList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领料工程" prop="proId">
          <el-select  v-model="queryParams.proId" filterable clearable @change="GetUnitData" style="width: 240px" placeholder="请选择">
            <el-option
              v-for="item in proList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协议号" prop="agreementCode">
          <el-input v-model="queryParams.agreementCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="物品类型" prop="status">
          <el-cascader
            placeholder="请输入物品类型"
            :options="deviceTypeTree"
            :props="deviceTypeTreeProps"
            v-model="deviceType"
            @change="deviceTypeChange"
            ref="deviceTypeCascader"
            filterable></el-cascader>
        </el-form-item>
        <el-form-item label="领料人" prop="leasePerson">
          <el-input
            v-model="queryParams.leaseApplyInfo.leasePerson"
            placeholder="请输入领料人"
            clearable 
          />
        </el-form-item>
        <el-form-item label="领料人电话" prop="phone">
          <el-input
            v-model="queryParams.leaseApplyInfo.phone"
            placeholder="请输入领料人电话"
            clearable
            style="width: 240px" 
          />
        </el-form-item>
        <el-form-item label="备注" prop="roleName">
          <el-input
            v-model="queryParams.leaseApplyInfo.remark"
            placeholder="请输入备注"
            clearable
            rows="1"
            type="textarea"
            style="width: 240px" 
          />
        </el-form-item>
      </el-row>
      <el-row>

      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-back"
          size="mini"
          @click="handleBack"
        >领料申请</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-if="isEdit=='true'"
          @click="handleAdd"
        >保存</el-button>
      </el-col>
    
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col> -->
    </el-row>

    <el-table v-loading="loading" :data="leaseApplyDetails" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="类型名称" prop="typeCn" :show-overflow-tooltip="true"   />
      <el-table-column label="规格型号" prop="guigeCn" :show-overflow-tooltip="true" />
      <el-table-column label="计量单位" prop="unitCn"/>
      <el-table-column label="库存数量" prop="num"/>
      <el-table-column label="预领数量" align="center" prop="createTime">
        <template slot-scope="scope">
          <el-input
            v-model.number="scope.row.preNum"
            placeholder="请输入预领数量"
            type="number"
            min="1" @input="checkNum(scope.row)"
            clearable
            style="width: 100%" 
          />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="createTime">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.remark"
            placeholder="请输入备注"
            clearable
            style="width: 100%" 
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" v-if="isEdit=='true'">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleBack(scope.row)"-->
<!--            v-hasPermi="['system:role:edit']"-->
<!--          >修改</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete({...scope.row,index:scope.$index})"
          >删除</el-button>

        </template>
      </el-table-column>
    </el-table>




  </div>
</template>

<script>
import {  getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
import {
  getProData,
  getUnitData,
  getDeviceTypeTree,
  getAgreementInfoById,
  submitLeaseApply,
  getTaskDetail,
  editLeaseApply,
  getLeaseApplyListAll,
  getLeaseApplyAuditListAll
} from '@/api/claimAndRefund/receive'
import { getInfo } from '@/api/login'
export default {
  name: "ReceiveApplyAdd",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
              callback(new Error("退料人电话不能为空"));
              // this.$message.error("手机号不为空");
      } else if (value.length < 11) {
              callback(new Error("电话号码格式不正确"));
              // this.$message.error("手机号格式不正确");
      } else {
              callback();
      }
    };
    return {
      user:null, // 用户信息
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      isEdit:'true',
      // 日期范围
      dateRange: [],
      // 数据范围选项
      dataScopeOptions: [
        {
          value: "1",
          label: "全部数据权限"
        },
        {
          value: "2",
          label: "自定数据权限"
        },
        {
          value: "3",
          label: "本部门数据权限"
        },
        {
          value: "4",
          label: "本部门及以下数据权限"
        },
        {
          value: "5",
          label: "仅本人数据权限"
        }
      ],
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {

        types:2,

        unitId:null,
        proId:null,
        agreementId:null, //协议id
        agreementCode: null, //协议code
        companyId:'', //登录信息中取
        createBy: '', //用户名
        taskType: 29,
        taskStatus: 30,
        //领料人信息
        leaseApplyInfo:{
          leasePerson: '',
          phone: '',
          remark: ''
        },
        //领料详情集合
        leaseApplyDetails:[]
      },
      leaseApplyDetails:[],

      leaseApplyInfoList:[],

      //领料详情单条模板
      leaseApplyDetailsItem:{
        parenntId:null,
        createBy: null,
        companyId: null,
        status: 0,
        typeId: null, //  树结构第4级   规格id
        typeCn:'', //显示的设备类型
        guigeCn:'', //显示的设备规格
        unitCn:'', //显示的设备 单位
        remark: '', //单条备注
        preNum: 1, //预领数量
      },
      //
      queryRules:{
        unitId:[
          {
            required:true,message:'请选择来往单位',trigger:'change',type:'number'
          }
        ],
        proId:[
          {
            required:true,message:'请选择工程',trigger:'change',type:'number'
          }
        ],
        // leasePerson: [
        //   {
        //     required: true, message: '请输入领料人', trigger: 'blur',
        //   }
        // ],
        // phone: [
        //     {required: true, message: '请输入领料人手机号', trigger: 'change'},
        //     { validator: validatePhone, trigger: "blur" },
        //     { min: 11, message: "手机号不足11位", trigger: "blur" },
        // ],
      },
      unitList:[], //单位 集合
      proList:[], // 工程 集合
      deviceTypeTree: [], // 设备 树结构数据

      taskId:null, // 是否编辑

      // 设备 树显示 配置
      deviceTypeTreeProps: {
        multiple:false,
        value:'id'
      },
      // 选中的设备类型
      deviceType: null,

      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ],
        roleKey: [
          { required: true, message: "权限字符不能为空", trigger: "blur" }
        ],
        roleSort: [
          { required: true, message: "角色顺序不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.GetUserInfo()

    this.GetUnitData()

    this.GetProData()

    this.GetDeviceTypeTree()
    // this.getList();
    if(this.$route.query.taskId){
      this.GetTaskDetail(this.$route.query.taskId)
    }
    if(this.$route.query.taskId&&this.$route.query.isBack){
      this.GetTaskDetail2(this.$route.query.taskId)
    }
    this.taskId = this.$route.query.taskId
    this.isEdit = this.$route.query.isEdit;
    // console.log(typeof(this.isEdit))
    // this.$set('isEdit',this.$route.query.isEdit)
  },

  methods: {
    // 获取用户信息
    async GetUserInfo(){
      const res = await getInfo()
      this.user = res.user
    },

    // 获取 来往单位 列表数据
    async GetUnitData(){
      const params = {
        id:this.queryParams.proId
      }
      const res = await getUnitData(params)
      this.unitList = res.data

      this.GetAgreementInfoById()
    },
    // 获取 工程名称 列表数据
    async GetProData(){
      const params = {
        id:this.queryParams.unitId
      }
      const res = await getProData(params)
      this.proList = res.data

      this.GetAgreementInfoById()
    },

    // 获取 设备树结构数据
    async GetDeviceTypeTree(){
      const params = {
        level:4
      }
      const res = await getDeviceTypeTree(params)
      this.deviceTypeTree = res.data

    },
    // 获取 协议id
    async GetAgreementInfoById(){
      if(this.queryParams.unitId && this.queryParams.proId){
        const params = {
          unitId: this.queryParams.unitId,
          projectId: this.queryParams.proId
        }
        const res = await getAgreementInfoById(params)
        if( !(res.data && res.data.agreementId) ){
          this.$message.error('当前单位和工程未上传');

          this.queryParams.unitId = null
          this.queryParams.proId = null
          this.GetUnitData()
          this.GetProData()
        }else{
          this.queryParams.agreementId = res.data.agreementId
          this.queryParams.agreementCode = res.data.agreementCode
        }
      }
    },

    // 获取 任务详情数据
    async GetTaskDetail(taskId){
      const res = await getLeaseApplyListAll({taskId})

      const data = res.rows[0]

        // unitId:null,
        // proId:null,
        // agreementId:null, //协议id
        // agreementCode: null,
      if(data.taskStatus==100){
        this.queryParams.taskStatus = 32
        this.queryParams.examineStatusId = '32'
      }
      this.queryParams.unitId = data.unitId
      this.queryParams.proId = data.proId
      this.queryParams.leaseApplyInfo.phone = data.leaseApplyInfoList[0].phone
      this.queryParams.leaseApplyInfo.leasePerson = data.leaseApplyInfoList[0].leasePerson
      this.queryParams.agreementCode = data.agreementCode
      this.queryParams.agreementId = data.agreementId
      this.queryParams.leaseApplyInfo.remark = data.leaseApplyInfoList[0].remark
      this.leaseApplyInfoList = data.leaseApplyInfoList
      this.leaseApplyDetails = data.leaseApplyDetails.map(item => {
          return this.handelEchoData(item)
      })

    },
    // 驳回提交 任务详情数据
    async GetTaskDetail2(taskId){
      const res = await getLeaseApplyAuditListAll({taskId})

      const data = res.rows[0]

        // unitId:null,
        // proId:null,
        // agreementId:null, //协议id
        // agreementCode: null,
      if(data.taskStatus==100){
        this.queryParams.taskStatus = 32
        this.queryParams.examineStatusId = '32'
      }
      this.queryParams.unitId = data.unitId
      this.queryParams.proId = data.proId
      this.queryParams.leaseApplyInfo.phone = data.leaseApplyInfoList[0].phone
      this.queryParams.leaseApplyInfo.leasePerson = data.leaseApplyInfoList[0].leasePerson
      this.queryParams.agreementCode = data.agreementCode
      this.queryParams.agreementId = data.agreementId
      this.queryParams.leaseApplyInfo.remark = data.leaseApplyInfoList[0].remark
      this.leaseApplyInfoList = data.leaseApplyInfoList
      this.leaseApplyDetails = data.leaseApplyDetails.map(item => {
          return this.handelEchoData(item)
      })

    },
    //生成回显数据
    handelEchoData(item){
      const template = JSON.parse(JSON.stringify(this.leaseApplyDetailsItem))
      template.createBy = item.createBy
      template.companyId = item.companyId
      template.typeId = item.typeId
      template.unitCn = item.unitName
      template.typeCn = item.typeName
      template.guigeCn = item.typeModelName
      template.remark = item.remark
      template.preNum = item.preNum
      template.status = item.status
      template.parenntId = item.parenntId
      template.num = item.num
      return template
    }, 
       
    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
      this.menuExpand = false,
        this.menuNodeAll = false,
        this.deptExpand = true,
        this.deptNodeAll = false,
        this.form = {
          roleId: undefined,
          roleName: undefined,
          roleKey: undefined,
          roleSort: 0,
          status: "0",
          menuIds: [],
          deptIds: [],
          menuCheckStrictly: true,
          deptCheckStrictly: true,
          remark: undefined
        };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1; 
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm"); 
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // this.queryParams.leaseApplyDetails = selection
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleDataScope":
          this.handleDataScope(row);
          break;
        case "handleAuthUser":
          this.handleAuthUser(row);
          break;
        default:
          break;
      }
    },

    /** 保存按钮操作 */
     handleAdd() {
      this.$refs.queryForm.validate(async (valid) => {
          if(!valid){
            return false
          }else {
            this.queryParams.leaseApplyDetails = this.leaseApplyDetails
            if( this.queryParams.leaseApplyDetails.length == 0 ){
              this.$message.error('请添加数据');
              return
            }
            this.queryParams.leaseApplyDetails.forEach(item=>{
              if(item.preNum==''){
                this.$message.error('请填写预领数量');
                return
              }
            })
            this.queryParams.createBy = this.user.userName
            this.queryParams.companyId = this.user.companyId
            let res;

            if(this.taskId){
              this.leaseApplyInfoList.forEach(v => {
                v = Object.assign(v,this.queryParams.leaseApplyInfo)
                this.$set(v,'leaseApplyDetails',this.queryParams.leaseApplyDetails)
              })
              
              const params = {
                ...this.queryParams,taskId:this.taskId,
                leaseApplyInfoList:this.leaseApplyInfoList
              }
             
              res = await editLeaseApply(params)
            }else {
              // console.log(this.queryParams)
              res = await submitLeaseApply(this.queryParams)
            }
            if(res.code == 200){
              this.$message({
                type:'success',
                message: '申请成功'
              }) 
              this.$tab.closeOpenPage({ path: "/claimAndRefund/receive/receiveApply"});
            }
          }
      })


    },
    /** 修改按钮操作 */
    handleBack(row) {
      this.$tab.closeOpenPage({ path: "/claimAndRefund/receive/receiveApply"});
    }, 
    /** 删除按钮操作 */
    handleDelete(row) {
      this.leaseApplyDetails.splice(row.index,1)
    },
    /** 导出按钮操作 */
    handleExport() {
      // this.download('system/role/export', {
      //   ...this.queryParams
      // }, `role_${new Date().getTime()}.xlsx`)
    },
   
    checkNum(row){
      if(row.preNum>=0){
        // if(row.preNum>=row.num){
          // row.preNum = row.num
        // }else{
          row.preNum = row.preNum
        // }
      }else{
        row.preNum = 0
      }
    },
    /////// 设备类型树  切换
    deviceTypeChange(val){
      console.log(val)
      let nodes = null;
      nodes = this.$refs.deviceTypeCascader.getCheckedNodes().length > 0 ? this.$refs.deviceTypeCascader.getCheckedNodes() : [this.$refs.deviceTypeCascader.panel.getNodeByValue(val)]
      if(nodes[0].level != 4){
        return
      }
      // console.log(this.leaseApplyDetails)
      // console.log(nodes[0].data.id)
      for(let i = 0; i < this.leaseApplyDetails.length; i++) {
            if (this.leaseApplyDetails[i].typeId == nodes[0].data.id) {
                this.leaseApplyDetails.splice(i,1)
                break;
            }
      }
      this.leaseApplyDetails.push(
        this.handelTableItemData(nodes[0])
      )
      this.deviceType = {} 
    },
    //// 将数据处理成 表格中需要的数据
    handelTableItemData(node){
      const template = JSON.parse(JSON.stringify(this.leaseApplyDetailsItem))
      template.createBy = this.user.name
      console.log(node.data)
      template.num = node.data.num
      template.companyId = node.data.companyId
      template.typeId = node.data.id
      template.unitCn = node.data.unitName
      template.typeCn = node.pathLabels[2]
      template.guigeCn = node.pathLabels[3]

      if(this.taskId){
        const index = this.leaseApplyInfoList.find(key => key.companyId == node.data.companyId)
        template.parenntId = index ? index.id : ''
      }

      return template
    }
  }
};
</script>
