<template>
  <div class="examination">
    <div class="common-head-search">
      <el-form :inline='true'>
        <el-form-item label='质控计划名称'>
          <el-input v-model="search.merchName" size="small" placeholder="请输入投诉名称" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="质控计划时间">
          <el-date-picker
            v-model="search.merchTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="width:300px"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="goon" size="mini" @click="searchData">查询</el-button>
          <el-button icon="el-icon-refresh" type="info" plain size="mini" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
        <el-col :span='14'>
          <div class="common-title-div">
            <div class="common-title-name">
              <img style="width: 25px; height: 25px" src='../../../../assets/img/imgScreen/logo.png'/>
              质控计划
            </div>
            <div>
              <el-button icon="el-icon-circle-plus-outline" type="goon" size="mini" style="vertical-align:middle;" @click="addData" >新增</el-button>
              <el-button icon="el-icon-circle-plus-outline" type="goon" size="mini" style="vertical-align:middle;" @click="modifyData" >修改</el-button>
              <el-button icon="el-icon-download" type="goon" size="mini" :loading='exportFileLoading' @click="exportFile">生成质控计划文件审核</el-button>
              <!-- <el-button icon="el-icon-edit" type="danger" size="mini" style="vertical-align:middle;" @click="deleteData" >删除</el-button> -->
            </div>
          </div>
          <div class="common-table-div" style="margin-top: 15px;">
            <el-table ref="dataTable2" :height="height_top" border
                      v-loading="dataLoading"
                      :data="table.list"
                      highlight-current-row
                      @selection-change="searchFollow2"
                      @cell-click='searchDData'
                      :header-cell-style="tableHeaderCellStyle"
                      style="width: 100%"
            >
              <el-table-column type="index" label="NO" fixed="left" align="center" width="45"></el-table-column>
              <el-table-column type="selection" width="45" fixed="left" align="center"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="planStdNo" label="计划编号"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="planName" label="计划名称"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="qltTypeName" label="质量类别"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="planDesc" label="计划描述"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="planDate" label="计划时间"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="companyName" label="管理单位"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="deptName" label="管理车间"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="sectionName" label="管理班组"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="memo" label="备注"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="filePath" label="文件"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="createTime" label="创建日期"></el-table-column>
              <el-table-column sortable show-overflow-tooltip align="center" min-width="100" prop="createMan" label="创建人"></el-table-column>
            </el-table>
          </div>
          <div class="common-foot-style">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange"
                           :current-page="page.pageNum" :page-sizes="[10, 20, 50, 100, 200]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="page.totalPage" background>
            </el-pagination>
          </div>
      </el-col>
      <el-col :span="10">
          <div class="common-title-div">
            <div class="common-title-name">
              <img style="width: 25px; height: 25px" src='../../../../assets/img/imgScreen/logo.png'/>
              质控计划明细
            </div>
            <div>
              <el-button icon="el-icon-circle-plus-outline" type="goon" size="mini" style="vertical-align:middle;" @click="addData2" >新增</el-button>
              <el-button icon="el-icon-circle-plus-outline" type="goon" size="mini" style="vertical-align:middle;" @click="modifyData2" >修改</el-button>
              <!-- <el-button icon="el-icon-edit" type="danger" size="mini" style="vertical-align:middle;" @click="deleteData" >删除</el-button> -->
            </div>
          </div>
          <div class="common-table-div" style="margin-top: 15px;">
            <el-table v-loading="dataLoading2" ref="dataTable2" border :height="height_bot" highlight-current-row @selection-change="handleSelectionChange" :data="table.list2"
                        :header-cell-style="tableHeaderCellStyle" :cell-class-name="tableRowClassName2">
                <el-table-column type="index" label="NO" fixed="left" align="center"></el-table-column>
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="200px" prop="planDate" label="计划时间" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="200px" prop="planItem" label="计划项目" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="planDept" label="计划单位" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="planMan" label="参加人员" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="planMethod" label="计划方法" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="planManner" label="计划方式" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="memo" label="备注" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="createTime" label="创建时间" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="createMan" label="创建人" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="updateTime" label="修改时间" align="center"></el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="updateMan" label="修改人" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="common-foot-style">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange"
                    :current-page="page.pageNum" :page-sizes="[10, 20, 50, 100, 200]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="page.totalPage" background>
            </el-pagination>
          </div>
      </el-col>
    </el-row>
    <div is="alertComponets" :showFlag="showFlag" :Params="Params" @refresh='refresh'></div>
    <div is="alertComponets2" :showFlag2="showFlag2" :Params1="Params1" :Params2="Params2" @refresh='refresh2'></div><!--传递参数-->
  </div>
</template>
<script>
import {
  getCookie
} from '@/utils/util.js';
import {
  cookieUserId,
  cookieUserName
} from '@/config/config.js';
import alertComponets from './alertComponents';
import alertComponets2 from './alertComponets2';
let userName = getCookie(cookieUserName);
let userId = getCookie(cookieUserId);
export default {
  components: {alertComponets,alertComponets2},
  data () {
    return {
      table: {
        list: [],
        list2: []
      },
      clickData: [],
      dataLoading: false,
      dataLoading2: false,
      exportFileLoading: false,
      showFlag: false,
      showFlag2: false,
      page: {
        pageSize: 50,
        pageNum: 1,
        totalPage: 0
      },
      page2: {
        pageSize: 999,
        pageNum: 1,
        totalPage: 0
      },
      multipleSelection:[],
      multipleSelection2:[],
      Params: {},
      Params1: {},
      Params2: {},
      search: {
        merchName: '',
        merchTime: []
      },
      height_top:0,
      height_bot:0
    }
  },
  created() {
    this.height_top = window.innerHeight - 230;
    this.height_bot = window.innerHeight - 230;
    this.search.merchTime=  [this.getYNM(new Date()), this.getYNM(new Date())]
  },
 mounted () {
    this.searchData();
  },
  methods: {
    getYNM(date) {
      let year = date.getFullYear().toString();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      return `${year}-${month}-${day}`;
    },
    exportFile(){
      if(this.multipleSelection2.length != 1){
        this.$message.warning('请勾选您要生成的一条计划数据！')
        return
      }
      this.exportFileLoading = true
      this.axios.post('pass/baseManagement/v1/limsisoplans/createFile',this.multipleSelection2,{individualType: 'json'}).then(res=>{
        if(res.succeed){
          this.$message.success('操作成功,请到供应商管理审核！');
        }
        this.exportFileLoading = false
      }).catch(e=>{
        this.exportFileLoading = false
        this.$message.error(e.message)
      })
    },
    addData(){
      this.showFlag = !this.showFlag;
      this.Params = null;
    },
    addData2(){
      if(this.multipleSelection2.length != 1){
        this.$message.warning('请选择一条质控计划！')
      }else{
        this.showFlag2 = !this.showFlag2;
        this.Params1 = null;
        this.Params2 = this.multipleSelection2[0].planNo;
      }
    },
    modifyData(){
      if(this.multipleSelection2.length != 1){
        this.$message.warning('请选择一条质控计划！')
      }else{
        this.showFlag = !this.showFlag;
        this.Params = this.multipleSelection2[0];
      }
    },
    modifyData2(){
      if(this.multipleSelection.length != 1){
        this.$message.warning('请选择一条质控计划明细！')
      }else{
        this.showFlag2 = !this.showFlag2;
        this.Params1 = this.multipleSelection[0];
        this.Params2 = null;
      }
    },
    searchData () {
        let _this = this;
        _this.dataLoading = true;
        _this.page.pageNum = 1;
        let startTime = ''
        let endTime = ''
        if (!this.search.merchTime) {
          startTime = ''
          endTime = ''
        } else {
          startTime = this.search.merchTime[0] + ' 00:00:00'
          endTime = this.search.merchTime[1] + ' 23:59:59'
        }
        let obj = {
          pageSize:this.page.pageSize,
          pageNum:_this.page.pageNum,
          startTime:startTime,
          endTime:endTime
        }
        _this.axios.post('pass/baseManagement/v1/limsisoplans/queryLimsIsoPlanList',obj,{individualType: 'json'}).then(res => {
            if(res.code == 0 || res.code == 200){
                _this.dataLoading = false;
                _this.table.list = res.data.list;
                _this.page.totalPage = res.data.total;
                if(_this.table.list.length > 0 ){
                  this.searchDData(_this.table.list[0]);
                }
            }else{
              _this.dataLoading = false;
              this.$message.error(res.message)
            }
        }).catch(e => {
          _this.dataLoading = false;
        });
      },
    searchDData(arr){
      this.dataLoading2 = true;
      this.axios.post('pass/baseManagement/v1/limsisoplands/queryLimsIsoPlanDList', arr ,{individualType: 'json'}).then(res =>{
            if (res.code == 0 || res.code == 200) {
              this.dataLoading2 = false;
              this.table.list2 = res.data
            } else {
              this.dataLoading2 = false;
              this.$message.error(res.message)
            }
      })
    },
    reset () {
      let _this = this;
      this.search.merchTime = [this.getYNM(new Date()), this.getYNM(new Date())]
      _this.search.merchName = '';
      _this.searchData();
    },
    refresh () {
      this.searchData();
    },
    refresh2() {
      this.searchDData(this.multipleSelection2[0]);
    },
    //选中数据2
    searchFollow2 (val){
      this.multipleSelection2 = val
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.getDataList();
    },
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.getDataList();
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    tableRowClassName2 ({
        row, column, rowIndex, columnIndex
      }) 
      {
        // if (columnIndex === 7) {
        // if (row.validFlag !== '1') {
        //   return 'error-row';
        // }
        // return '';
        // }
      },
    tableHeaderCellStyle () {
      return 'color: rgb(255,255,255);border-bottom: 1px solid #DCDFE7;'
    }
  }
}
</script>
<style  scoped>
/*.common-title-div-mydefine {*/
/*  font-size: 14px;*/
/*  padding: 10px 10px;*/
/*  border-bottom: 1px solid #d5d5d5;*/
/*  position: relative;*/
/*  height: 100px;*/
/*}*/
</style>
