<template>
<!--  月度计划管理 -->
  <el-container>
    <el-header style="width: 100%; height: 50px;font-size: 12px">
      <el-form :inline="true"  label-width="65px"  label-position="left">
        <el-row>
          <el-col :span="15">
            <el-form-item label="月份:">
              <el-date-picker v-model="queryParam.yf" value-format="yyyy/MM/dd"  type="month"  style="width: 80%;" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item style="float: right" >
              <el-button type="success" @click="initList">查询</el-button>
              <el-button type="success" @click="ydjhxf">下发</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-header>
    <el-container  style="padding-top: 0px">
      <el-main>
          <div class="mytable">
            <!--              <el-button type="success" @click="symxhz">汇总</el-button>-->
            <vxe-grid
              id="id"
              ref="xGrid"
              border
              resizable
              keep-source
              :align="'center'"
              :height="height"
              :auto-resize="true"
              :columns="tableColumn"
              :data="list"
              :custom-config="{ storage: true }"
              :edit-config="{
                            trigger: 'click',
                            mode: 'row',
                            showStatus: true,
                          }"
              @checkbox-all="selectAllEvent"
              @checkbox-change="selectChangeEvent"
              highlight-current-row
              highlight-hover-row
              show-overflow
              :scroll-y="{enabled: true}"
              :row-class-name="rowClassName"
            >
              <template #ng="{ row }">
                <div>
                  <el-tooltip v-if="!!handlerTooTipContent(row)" class="item" effect="dark" :content="handlerTooTipContent(row)" placement="top-start">
                    <i class="el-icon-warning icon-style"/>
                  </el-tooltip>
                  {{row.dcCh}}
                </div>
              </template>
              <template #gg="{ row }">
                <div>
                  <el-tooltip v-if="!!handlerTooTipContent(row)" class="item" effect="dark" :content="handlerTooTipContent(row)" placement="top-start">
                    <i class="el-icon-warning icon-style"/>
                  </el-tooltip>
                  {{row.dcCh}}
                </div>
              </template>
            </vxe-grid>
          </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { VXETable } from 'vxe-table'
import {getCzxx, qfxqTJ} from '@/api/jhzx/qfxq'
import {getYdjh, ydjhxf, getCnsb,hz} from '@/api/jhzx/sygd'
import { mapGetters } from 'vuex'
import XEUtils from 'xe-utils'
import { getToken } from '@/utils/auth'
import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue";
export default {
  name:'YdjhzxGL',
  components: {ScrollPane},
  data() {
    return {
      dialogVisible:false,
      title1:'修改明细信息',
      selectMbch:[],
      mxList:[],
      haveTltBoms:[],
      activeName: 'first',
      queryParam: {
        dcch:'',
        yf:'',
        zt:'1'
      },
      list: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      checkedList: [],
      heads: { token: getToken() },
      dictData:[],
      sbxx:{},
      height: '500px',
      tableColumn:[
        { type: 'checkbox', width: 50 ,},
        { type: 'seq', width: 60, title: '序号'},
        { field: 'dcCh', title: '船号',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
          // slots:{default:'ng'}
        },
        // { field: 'dcCh1', title: '目标船号',width: 90,
        //   filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
        //   filterRender: { name: 'FilterCombination', }},//数据来源船，真实数据时，为空
        { field: 'dcPl', title: '批量',width: 80,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'dcFd', title: '分段号',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'zl', title: '组立',width: 80,formatter: ['dictFormat','ZLLB'],
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'kw', title: '跨位',width: 80,formatter: ['dictFormat','QGKW'],
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'tzbh', title: '套料图号',width: 90,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'jssj', title: '前方需求时间',width: 110,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'czplpNew.xfqTlt', title: '套料图下发日期', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'slrq', title: '上料计划日期',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'pwrq', title: '抛丸计划日期',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'hxrq', title: '划线计划日期',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'qgrq', title: '切割计划日期',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'lqlb', title: '领取类型',width: 90,formatter: ['dictFormat','CLlQ'],
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'lx', title: '物资类型',width: 90,formatter:this.formatterLx,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'wpgg', title: '规格',width: 80,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'bcshzl', title: '重量',width: 80,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'wpxh', title: '材质',width: 80,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],},
        { field: 'xcms', title: '型材米数',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'jzbs', title: '矫正标识',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'hxcd', title: '划线长度(米)',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'hxcdKc', title: '划线空程长度(米)',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'qgcd', title: '切割长度（米)',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'qgcdKc', title: '切割空程长度（米)',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'jzsb', title: '矫正设备',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },editRender: { name: "$select",options: [],props: { clearable: true} }},
        { field: 'pwsb', title: '抛丸设备',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination'  },editRender: { name: "$select",options: [],props: { clearable: true}}},
        { field: 'hxsb', title: '划线设备',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },editRender: { name: "$select",options: [],props: { clearable: true,}}},
        { field: 'qgsb', title: '切割设备',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },editRender: { name: "$select",options: [],props: { clearable: true,}}},
        { field: 'pklx', title: '坡口类型',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'pkcd', title: '坡口长度',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'pksb', title: '坡口设备',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },editRender: { name: "$select",options: [],props: { clearable: true,}}},
        { field: 'pkrq', title: '坡口计划日期',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'qbs', title: '曲标识',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'qjgsb', title: '曲加工设备',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },editRender: { name: "$select",options: [],props: { clearable: true,}}},
        { field: 'qjgrq', title: '曲加工计划日期',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'dmcd', title: '打磨长度',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'dmsb', title: '打磨设备',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },editRender: { name: "$select",options: [],props: { clearable: true,}}},
        { field: 'dmrq', title: '打磨计划日期',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'gjjsDz', title: '钢加大组结束',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'gjjsXz', title: '钢加小组结束',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'ljsl', title: '零件数量',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'gjks', title: '钢加开始',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'dcCh2', title: '本船号',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},//没有真实数据时，为空
        { field: 'zt', title: '状态',width: 70,formatter: ['dictFormat','SYZT'],
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},
        { field: 'gxsj', title: '数据更新时间',width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }},

        { field: 'czplpNew.xfqLqb', title: '领取表下发日期', width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['name', 'bmbm'])
  },
  created() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.initBase()
  },
  methods: {
    handlerTooTipContent(row){
      let str=''
      if(!row.czplpNew){
        str+='缺少图纸计划;';
      }else {
        //套料图下发日期晚于切割日期
        if(row.czplpNew.tltxfrq>row.qgrq){
          str+='套料图下发日期('+row.czplpNew.tltxfrq+')不满足切割计划('+row.qgrq+');';
        }
      }
      if(!row.kc){
        str+='缺少库存;'
      }
      //下发提示信息
      row._ngMsg=str;
      return str;
    },
    async ydjhxf() {
      if (this.checkedList.length <= 0) {
        return
      }
      let tipsFlag = false
      let tipsMsg=''
      for (const item of this.checkedList) {
        if (item._ngMsg) {
          tipsFlag = true
          tipsMsg=item.dcCh+","+item.dcPl+","+item.dcFd+':'+item._ngMsg+'!是否继续下发'
          break;
        }
      }
      if (tipsFlag) {
        const type = await VXETable.modal.confirm(tipsMsg)
        if(type==='cancel'){
          return;
        }
      }
      ydjhxf(this.checkedList).then(res => {
        if (res.success) {
          this.initList()
        }
      })

    },
    //汇总
    symxhz(){
      if (this.list.length<1){
        this.$message.warning('请先查询需要汇总的信息！');
        return
      }
      hz(this.list).then((res) => {
        if (res.data) {
          this.list2=res.data.tzjhList
          this.list3=res.data.dhList
          this.list4=res.data.slList
          this.list5=res.data.pwList
          this.list6=res.data.qgList
        }
      })
    },
    // 全选
    selectAllEvent() {
      const records = this.$refs.xGrid.getCheckboxRecords();
      this.checkedList = records;
    },
    // 单选
    selectChangeEvent() {
      const records = this.$refs.xGrid.getCheckboxRecords();
      this.checkedList = records;
    },

    //修改明细信息；根据修改后的设备信息；重新排计划期
    save(){
      this.$message.warning('保存成功！');
      this.dialogVisible=false;
    },
    //切换数据表点击事件
    handleClick(tab, event) {
      if(this.activeName==='second'){
        // alert('线表计划')

      }
      if(this.activeName==='third'){
        // alert('批量表')

      }
      if(this.activeName==='fourth'){
        // alert('图纸')

      }
      if(this.activeName==='fifth'){
        // alert('到货')
        if (this.list.length>0){

        }
      }
      if(this.activeName==='sixth'){
        console.log(this.list5)
      }
    },
    //材料类型转码
    formatterLx({cellValue}){
      if(cellValue==='B'){
        return '板材'
      }
      if (cellValue==='X'){
        return '型材'
      }
      return cellValue
    },
    //转码信息
    initBase(){
      getCzxx({}).then(res=>{
        this.dictData = res.data
      })
      getCnsb().then(res=>{
        this.sbxx = res.data
        const tableRef = this.$refs.xGrid.getColumnByField('dcCh');
      })
      var date = new Date();
      var Y = date.getFullYear() + "/";
      var M = (date.getMonth() + 2 < 10 ? "0" + (date.getMonth() + 2) : date.getMonth() + 2)+ "/";
      var D = date.getDate()<10?  "0" +date.getDate():date.getDate();
      //this.queryParam.yf = Y + M + D;
      this.queryParam.yf= XEUtils.toDateString(XEUtils.getWhatMonth(new Date(), 0, 'first'),'yyyy/MM/dd')
    },
    //初始化表1 数据
    initList() {
      if (this.queryParam.yf === '') {
        this.$message.warning('选择时间范围')
        return
      }
      getYdjh(this.queryParam).then((res) => {
        this.list = res.data
        console.log(this.list)
        if (this.$refs.xGrid) {
          this.$refs.xGrid.loadData(this.list)
        }

      })
      this.activeName='first'
    },
    formatDate ({ cellValue }) {
      return XEUtils.toDateString(cellValue, 'yyyy/MM/dd')
    },
    getHeight() {
      this.height = window.innerHeight - 150
    },
    rowClassName({ row, rowIndex ,column}){
      console.log(row.color)
      if(row.color==='red'){
        return 'row-red'
      }else if(row.color==='yellow'){
        return 'row-yellow'
      }

    },
  }
}
</script>
<style lang="scss" scoped >

.icon-wrapper {
  background-color: #f00; /* 红色背景 */
  border-radius: 50%; /* 如果你想要圆形图标容器 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px; /* 或者你想要的任何尺寸 */
  height: 50px; /* 或者你想要的任何尺寸 */
}

.icon-style {
  color: #fd2222; /* 图标颜色 */
  /* 其他图标样式 */
}

.el-header{margin:0;padding: 5px;height:auto;
  .el-input{
    width: 140px;
  }
  .el-select{
    width: 140px;
  }

}
.el-container{padding: 0;margin:0;}
.el-main{padding: 0;}
.el-col{padding: 0;height: 32px;}
.el-aside{background: #fff;padding: 0}
.el-container{padding: 0}
.el-row {}
.el-row:last-child {margin-bottom: 0; }

.tableStyles{
  background: #0a76a4;
}

.my-dropdown {
  width: 400px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;

}
.mytable1{

}
.borderClass{

}
.vxe-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}
.el-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}
.keyword-lighten {
  color: #000;
  background-color: #FFFF00;
}

.vxe-textarea--inner {
  line-height: inherit;
}
.el-form-item__label-wrap {
  margin-left: 0px !important;
  float: left;
}
.fontClass{
  font-size: 12px;
  font-weight: bold;
}


</style>
