<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="app-container">
    <div class="filter-container">
      <el-input size="mini" v-model.trim="search.keyWord" placeholder="关键字" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.orderCode" placeholder="订单编号" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.orderName" placeholder="印品名称" style="width: 120px;" class="filter-item"/>
      <el-select style="width: 180px;" @change="productInfoChange" multiple size="mini" value-key="value" v-model="billStateParms" placeholder="施工单状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        size="mini"
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy - MM - dd "
        value-format="yyyy-MM-dd"
        :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button
        size="mini"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-refresh"
        @click="refreshSelectedTag">
        刷新
      </el-button>
      <el-button
        size="mini"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-copy-document"
        @click="printBillDoPrint">
        批量打印
      </el-button>
      <el-checkbox size="small" @change="checkVoidFlagState" v-model="voidFlagState" label="查询已作废施工单" border></el-checkbox>
    </div>
    <el-table
      size="mini"
      max-height="700px"
      tooltip-effect="light"
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      ref="multipleTable"
      border
      @row-click="handleClickTableRow"
      @selection-change="handleSelectionChange"
      :default-sort = "{prop: 'billMoneyPaper', prop: 'billMoneyPrint',prop: 'billMoneyTotal',prop: 'createTime',order: 'ascending'}"
      default-expand-all>
      <el-table-column
        fixed
        label="#"
        align="center"
        type="index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        fixed
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column  fixed v-if="!voidFlagState"  label="操作" align="left" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button
            v-show="updateBtn"
            title="编辑"
            v-if="row.billState!=1"
            @click.stop="$router.push({path:'/printbill/editPrintBill',query:{idPrintBill:row.id,clientName:row.billName,type:'update'}})"
            type="primary" icon="el-icon-edit" size="mini">
          </el-button>

          <el-button v-show="blackBtn" icon="el-icon-back" v-if="row.billState==1" @click.stop="handleBack(row)" title="退回" size="mini">
          </el-button>
          <el-button icon="el-icon-delete" title="作废" v-if="row.billState==0" @click.stop="handleDelete(row.id)" size="mini">
          </el-button>
          <el-button v-show="trimBtn" v-if="row.billType==1&&row.billState==0" icon="el-icon-rank" @click.stop="dyPlatePlugin(row,$event)" title="版式调整" size="mini">
          </el-button>
          <el-button  v-show="recombinationBtn" v-if="row.billType==1&&row.billState>=1" icon="el-icon-refresh" @click.stop="pluginRefres($event,row.id)" title="重拼" size="mini">
          </el-button>
          <el-button
            v-show="forceupdate"
            title="强制修改"
            v-if="row.billState==1"
            @click.stop="$router.push({path:'/printbill/editPrintBill',query:{idPrintBill:row.id,clientName:row.billName,type:'forceupdate'}})"
            type="warning" icon="el-icon-edit-outline" size="mini">
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="施工单号"
        fixed
        width="110px"
      >
        <template slot-scope="{row}">
                    <span @click.stop="getOrderStep(row.id)"
                          style="color: #409EFF;cursor: pointer" v-html="row.billCode"></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed
        label="印品名称"
        width="140px"
        show-overflow-tooltip
      >
        <template slot-scope="{row}">
          <span @click.stop="handleDetail(row.id)" style="color: #409EFF;cursor: pointer;"> {{ row.billName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="60"
        prop="printCount"
        label="打印次数">
      </el-table-column>
      <el-table-column
        label="施工单消息"
        width="180px"
        show-overflow-tooltip
      >
        <template slot-scope="{row}">
          <template v-if="row.billMsg">
            <el-button size="mini" icon="el-icon-plus" @click.stop="openMessage(row)"></el-button>
            <span
              style="color: #20a0ff; cursor: pointer"
              @click.stop="openMessage(row)"> {{ row.billMsg }}</span>
          </template>
          <template v-else>
            <el-button size="mini" icon="el-icon-plus" @click.stop="openMessage(row)"></el-button>
          </template>
        </template>
      </el-table-column>

      <el-table-column
        width="150"
        prop="productName"
        label="产品类型">
      </el-table-column>
      <el-table-column
        width="150"
        show-overflow-tooltip
        prop="processText"
        label="工序">
      </el-table-column>
      <el-table-column
        prop="clientName"
        width="120px"
        show-overflow-tooltip
        label="客户名称">
        <template slot-scope="{row}">
          <span> {{ row.clientName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单状态" align="center" width="110px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-tag size="mini" type="danger" v-if="row.voidFlag==1">已作废</el-tag>
          <el-tag size="mini" type="warning" v-if="row.billState==0 && row.voidFlag!=1">待审核</el-tag>
          <el-tag size="mini" type="success" v-if="row.billState==1  && row.voidFlag!=1">已下达</el-tag>
          <el-tag size="mini" type="info" v-if="row.billState==10  && row.voidFlag!=1">已完工</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createManName"
        label="建单人">
      </el-table-column>
      <el-table-column
        width="160px"
        label="订单详细信息">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.orderProduceInfos" placement="top-start" effect="light">
            <div v-html="getOrderProduceInfos(scope.row.orderProduceInfos)" slot="content"></div>
            <span class="ellipsis">{{scope.row.orderProduceInfos}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        width="130px"
        label="建单时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="billNote"
        width="120px"
        show-overflow-tooltip
        label="备注">
      </el-table-column>
      <el-table-column
        prop=""
        label="特殊工序">
      </el-table-column>
      <el-table-column
        prop=""
        label="已外协工序">
      </el-table-column>
      <el-table-column
        sortable
        prop="billMoneyPaper"
        label="纸张金额">
      </el-table-column>
      <el-table-column
        sortable
        prop="billMoneyPrint"
        label="印工">
      </el-table-column>
      <el-table-column

        prop="billMoneyProcess"
        label="后工金额">
      </el-table-column>
      <el-table-column

        prop="orderMoneyTotal"
        label="订单金额">
        <template slot-scope="scope">
          <span style="color: #e4493c" v-if="scope.row.orderMoneyTotal<scope.row.billMoneyTotal">{{scope.row.orderMoneyTotal}}</span>
          <span v-else>{{scope.row.orderMoneyTotal}}</span>
        </template>
      </el-table-column>

      <el-table-column
        sortable
        prop="billMoneyTotal"
        label="合计金额">
        <template slot-scope="scope">
          <span style="color: #e4493c" v-if="scope.row.billMoneyTotal>=5000">{{ scope.row.billMoneyTotal }}</span>
          <span v-else>{{ scope.row.billMoneyTotal }}</span>
        </template>
      </el-table-column>


    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                :limit.sync="listData.pageSize" @pagination="getTableInfo"/>


    <!--    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">-->
    <!--      <el-form :model="ruleForm" label-width="130px" :rules="rules" ref="ruleForm" label-position="right">-->
    <!--        <el-row :gutter="20">-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item prop="clientName" label="施工单名称">-->
    <!--              <el-input v-model="ruleForm.clientName"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item prop="contactMan" label="联系人">-->
    <!--              <el-input v-model="ruleForm.contactMan"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item prop="contactPhone" label="联系电话">-->
    <!--              <el-input v-model="ruleForm.contactPhone"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item prop="address" label="详细地址">-->
    <!--              <el-input v-model="ruleForm.address"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          &lt;!&ndash;          <el-col :span="12">&ndash;&gt;-->
    <!--          &lt;!&ndash;            <el-form-item label="施工单来源">&ndash;&gt;-->
    <!--          &lt;!&ndash;              <el-input v-model="ruleForm.clientFrom"></el-input>&ndash;&gt;-->
    <!--          &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
    <!--          &lt;!&ndash;          </el-col>&ndash;&gt;-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item-->
    <!--              prop="overdraftQuota"-->
    <!--              :rules="[-->
    <!--                { type: 'number', message: '欠款额度必须为数字值'}-->
    <!--              ]"-->
    <!--              label="欠款额度(元)">-->
    <!--              <el-input v-model.number="ruleForm.overdraftQuota" autocomplete="off"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          &lt;!&ndash;          <el-col :span="12">&ndash;&gt;-->
    <!--          &lt;!&ndash;            <el-form-item label="所属业务员">&ndash;&gt;-->
    <!--          &lt;!&ndash;              <el-input v-model="ruleForm.salesManNameBelong"></el-input>&ndash;&gt;-->
    <!--          &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
    <!--          &lt;!&ndash;          </el-col>&ndash;&gt;-->
    <!--        </el-row>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="dialogStatus==='1'?addBtn('ruleForm'):editBtn('ruleForm')">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <printbill-detail ref="printbillDetail"></printbill-detail>
    <print-step :modalAppendBody="modalAppendBody" ref="printStep"></print-step>
    <el-dialog title="反馈设置" :visible.sync="dialogFormVisible2" width="750px">

      <div>
        <el-checkbox-group v-model="checkList">
          <div
            v-for="(item,index) in printBreedTasks2.breedTasksAssortedList"
            :key="index"
          >
            <div style="width: 380px;height: 30px;"><span
              style="color: #3c3c3c;font-size: 16px;line-height: 30px">{{ item.breedName }}</span></div>
            <div
              style="margin-left: 25px;"
              v-for="(item,index) in item.taskList"
              :key="item.id"
            >
              <el-checkbox :disabled="item.processName=='拼版'" style="line-height: 30px;color: #7c7c7c" :label="item"><span
                style="color: #7c7c7c;font-size: 13px;line-height: 30px;padding-left: 18px;">重新反馈{{ item.processName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 最后操作人名字:&nbsp;&nbsp;{{
                  item.lastOperateManName
                }}</span>
              </el-checkbox>


            </div>

          </div>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="backBreedTaskBtn2">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer
      title="施工单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message @handleAddBreed="handleAddBreed" ref="orderMessage"></order-message>
    </el-drawer>
  </div>
</template>

<script>
import {
  addInfo,
  backPrintBill,
  getInfo,
  getInfoById,
  printBillDoPrint,
  updatePrintBill,
  voidPrintBill,
  printBillRebuildPlate,
  ifPermissionList
} from '@/api/printbill/printbill.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import Pagination from '@/components/Pagination'
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import printStep from "@/components/printbillDetail/printStep";
import {queryAssorted} from "@/api/printbill/breedTasks/breedTasks";
import OrderMessage from '@/views/feedBack/orderMessage/orderMessage'
import {doLocalPrint} from "@/utils";
import {defaultMaterialStock} from "@/api/printbill/preOut/preOut";

export default {
  name: "printBillList",
  components: {
    Cancledialog,
    Pagination,
    PrintbillDetail,
    printStep,
    OrderMessage
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  beforeRouteEnter(to, from, next) {
    // next()
    next(vm => {
      // beforeRouteEnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例
      if(to.path=="/printbill/list"){
        vm.getTableInfo();
        vm.checkPermission();
      }

    })
  },
  data() {
    return {
      modalAppendBody:true,
      options: [{
        value: '0',
        label: '待审核'
      }, {
        value: '1',
        label: '已下达'
      }],
      billStateParms:["0","1"],
      memoDrawer:false,
      rowData:{},
      voidFlagState:false,
      checkList: [],
      multipleSelection: [],
      multipleSelection3: [],
      printBreedTasks2: [],
      dialogFormVisible2: false,
      drawer: false,
      avtiveStep: true,
      activitiesArray: [],
      printBillBreedList: [],//生产信息
      printOrderList: [],//订单列表
      processList: [],//工序列表
      activities: [],
      printBillDetail: {},
      printVisible: false,
      cityshow: false,
      byId: "",
      dialogStatus: 1,//1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      search: {
        keyWord: '',
        orderCode: '',
        orderName: '',
        beginTime: "",
        endTime: "",
        billStatus:""
      },
      ruleForm: {},
      rules: {
        industryName: [
          {required: true, message: '请选择行业信息', trigger: 'change'}
        ],
        levelName: [
          {required: true, message: '请选择施工单等级', trigger: 'change'}
        ],
        payMode: [
          {required: true, message: '请选择付款方式', trigger: 'change'}
        ],
        clientName: [
          {required: true, message: '请填写施工单名称', trigger: 'blur'}
        ],
        contactMan: [
          {required: true, message: '请填写联系人', trigger: 'blur'}
        ],
        contactPhone: [
          {required: true, message: '请填写联系电话', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请填写详细地址', trigger: 'blur'}
        ]
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      confirmdialog: false,
      listLoading: false,
      tableData: [],
      menuId: '',
      updateBtn:false,
      blackBtn:false,
      recombinationBtn:false,
      trimBtn:false,
      value1: "",
      forceupdate:false,
    }
  },
  mounted() {

  },
  methods: {
    productInfoChange(val) {
      this.billStateParms = val;
    },
    handleAddBreed(breedMsg) {
      this.memoDrawer = false;
      this.rowData.breedMsg = breedMsg;
    },

    // 施工单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true;
      _that.rowData = row;
      _that.$nextTick(function () {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.idOrder;
        _that.$refs.orderMessage.idPrint = row.idOrder;
        _that.$refs.orderMessage.printBillId = row.id;
        _that.$refs.orderMessage.sMessageForm = false;
        _that.$refs.orderMessage.sMessage = "";
        _that.$refs.orderMessage.getBillMessageListByPrintBill()
      })
    },
    checkVoidFlagState(){
      this.listData.page = 1;
      this.getTableInfo()
    },
    checkPermission(){
      const _that = this;
      var data = {
        'permissions': 'printbill:update|printbill:black|printbill:recombination|printbill:trim|printbill:forceupdate'
      }
      ifPermissionList(data).then(response => {
        // console.log('response', response)
        if (response.httpCode == 200) {
          var premArray = response.data.split("|")
          // console.log(premArray);
          if(premArray[0]=="0"){
            _that.updateBtn = false;
          }else {
            _that.updateBtn = true;
          }
          if(premArray[1]=="0"){
            _that.blackBtn = false;
          }else {
            _that.blackBtn = true;
          }
          if(premArray[2]=="0"){
            _that.recombinationBtn = false;
          }else {
            _that.recombinationBtn = true;
          }
          if(premArray[3]=="0"){
            _that.trimBtn = false;
          }else {
            _that.trimBtn = true;
          }
          if(premArray[4]=="0"){
            _that.forceupdate = false;
          }else {
            _that.forceupdate = true;
          }
        }
      }).catch(err => {
        // _that.$message.error(err)
      })
    },
    pluginRefres(e,id){
      const _that = this;
      var data = {
        'idBill': id
      }
      printBillRebuildPlate(data).then(response => {
        // console.log('defaultMaterialStock', response)
        if (response.httpCode == 200) {
          _that.$message.success('重拼成功')
        }
      }).catch(err => {
        // _that.$message.error(err)
      })
      window.event? window.event.cancelBubble = true : e.stopPropagation();
    },
    // 版式调整
    dyPlatePlugin(row,e) {
      // alert('delphi弹窗')
      var _that = this
      var userAgent = navigator.userAgent
      if (userAgent.indexOf('DnyERPBrowser') > 0) {
        var data = {
          package: 'dyComposePlatePlugin',
          runParam: 'Form:Show:TfrmUpdatePrintPlate@'+row.id,
          menuName: '版式调整'
        }
        dyERP.sendRunForm(JSON.stringify(data))
      } else {
        // alert('请使用开发商提供的ERP客户端')
        _that.$message({
          message: '请使用开发商提供的ERP客户端',
          type: 'warning'
        })
      }
      window.event? window.event.cancelBubble = true : e.stopPropagation();
    },
    getOrderProduceInfos(str){
      // console.log(str)
      var newStr = str.replace(/`/g,"<br/>")
      // console.log(newStr);
      return newStr
    },
    printBillDoPrint() {
      const _that = this;
      var ids = [];
      if (_that.multipleSelection.length <= 0) {
        _that.$message("请选择施工单");
        return
      }
      for (var i = 0; i < _that.multipleSelection.length; i++) {
        var datas = _that.multipleSelection[i];
        ids.push(datas.id)

      }
      var datas = {
        "ids": ids.join(',')
      }
      printBillDoPrint(datas).then(response => {
        // console.log("printBillDoPrint", response);
        var PrintData = {
          '_rootData': response.data
        }
        var data = {
          PrintTemplate: 'printBill.fr3',
          NeedPreview: 1,
          PrintData: JSON.stringify(PrintData)
        }
        // axios.post('http://127.0.0.1:19876', JSON.stringify(data), { headers: { 'Content-Type': 'application/json;charset=UTF-8' }}).then((res) => {
        //   console.log(res)
        // }).catch((error) => {
        //   console.log(error)
        // })

        // 以后打印调这个通用接口
        doLocalPrint(data)
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    handleClickTableRow(row, event, column) {
      const _that = this;
      _that.$refs.multipleTable.toggleRowSelection(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    backBreedTaskBtn2() {
      const _that = this;
      var testOld = [];
      _that.checkList.forEach(el => {
        var oldObj = {id: el.idPrintBreed, taskList: []}
        var txtObj = {id: el.id};
        oldObj.taskList.push(txtObj);
        testOld.push(oldObj);
      });
      var newData = []; // 目标数组
      var newObj = {};
      testOld.forEach((el, i) => {
        if (!newObj[el.id]) {
          newData.push(el);
          newObj[el.id] = true;
        } else {
          newData.forEach(el => {
            if (el.id === testOld[i].id) {
              el.taskList = el.taskList.concat(testOld[i].taskList);
              // el.txtArr = [...el.txtArr, ...testOld[i].txtArr]; // es6语法
            }
          })
        }
      });
      _that.billNewData = newData;
      var printbill = {
        printbill: {
          id: _that.printBreedTasks2.id,
          currentVersion: _that.printBreedTasks2.currentVersion,
          breedTasksAssortedList: newData
        }
      }
      // console.log(printbill);
      backPrintBill(printbill).then(response => {
        // console.log("getAllEnableMachineInfo", response)
        _that.$message.success("退回成功");
        _that.tableData = [];
        _that.dialogFormVisible2 = false;
        _that.getTableInfo();


      }).catch(err => {
        _that.$message.error(err)
      })
    },
    handleSelectionChange3(val) {
      this.multipleSelection3 = val;
      // console.log(this.multipleSelection3);
    },
    handleBack(row) {
      const _that = this;
      _that.checkList = [];
      _that.printBreedTasks2 = [];
      _that.row = row;
      _that.dialogFormVisible2 = true;

      // console.log("_that.selectData", _that.selectData2);

      var printbill = {
        idBill: row.id
      }
      queryAssorted(printbill).then(response => {
        // console.log("printBreedTasks2", response)
        _that.printBreedTasks2 = response.data;
        // console.log("111",response.data.breedTasksAssortedList);
        if(response.data.breedTasksAssortedList.length>0){
          for (let i = 0; i < response.data.breedTasksAssortedList.length; i++) {

            var dataItem = response.data.breedTasksAssortedList[i];
            // console.log("222",dataItem);
            for (let j = 0; j < dataItem.taskList.length; j++) {
              if(dataItem.taskList[j].processName!="拼版"){
                _that.checkList.push(dataItem.taskList[j]);
              }

            }
          }
        }
        // console.log("333",_that.checkList);
        // _that.checkList = response.data.breedTasksAssortedList;
      }).catch(err => {
        _that.$message.error(err)
      })


      // _that.$confirm('此操作将退回施工单, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   var printbill = {
      //     id: row.id,
      //     currentVersion: row.currentVersion
      //   };
      //   console.log(printbill)
      //   var params = {
      //     'printbill': JSON.stringify(printbill)
      //   }
      //   backPrintBill(params).then(response => {
      //     _that.$message("施工单退回成功")
      //     _that.getTableInfo();
      //   }).catch(err => {
      //     _that.$message.error(err)
      //   })
      // }).catch(() => {
      // });
    },
    handleDelete(id) {
      const _that = this;
      _that.$confirm('此操作将作废施工单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var printbill = {
          id: id
        };
        var params = {
          'printbill': JSON.stringify(printbill)
        }
        voidPrintBill(params).then(response => {
          // console.log(response);
          _that.getTableInfo();
          _that.$message("施工单作废成功")
        }).catch(err => {
          _that.$message.error(err)
        })
      }).catch(() => {
      });
    },
    getOrderStep(id) {
      const _that = this;
      _that.$refs.printStep.idOrder = id;
      _that.$refs.printStep.drawer = true;
      _that.$refs.printStep.getStep();
    },
    handleClose() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities.slice(0, 9);
    },
    handleOpen() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities;
    },
    handleDetail(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.fullscreenLoading = true;
      _that.$refs.printbillDetail.getDetail()
    },
    iscityShow() {
      this.cityshow = false;
      this.selected = [];
      var t = setTimeout(() => {
        this.cityshow = true
      }, 0);
    },
    //获取列表
    getTableInfo() {
      const _that = this
      _that.listLoading = true;
      // console.log(_that.value1);
      // if (_that.value1.length > 0) {
      //   _that.search.beginTime = _that.value1[0] + " 00:00:00";
      //   _that.search.endTime = _that.value1[1] + " 23:59:59";
      // }
      var ids = []
      if (_that.billStateParms.length>0) {
        for (let i = 0; i <_that.billStateParms.length; i++) {
          var datas = _that.billStateParms[i];
          ids.push(datas)
        }
        var idRemotes = ids.join(',');

        _that.search.billStatus = idRemotes;
      }else {
        _that.search.billStatus = "";
      }
      if (_that.value1 == null || _that.value1 < 0 || _that.value1.length<=0) {
        _that.search.beginTime = ''
        _that.search.endTime = ''
      } else {
        _that.search.beginTime = _that.value1[0] + " 00:00:00";
        _that.search.endTime = _that.value1[1] + " 23:59:59";
      }
      if(_that.voidFlagState){
        var params = {
          voidFlag: 1,
          keyWord: _that.search.keyWord,
          orderCode: _that.search.orderCode,
          orderName: _that.search.orderName,
          beginTime: _that.search.beginTime,
          endTime: _that.search.endTime,
          billStatus:_that.search.billStatus
        };
      }else{
        var params = {
          voidFlag: 0,
          keyWord: _that.search.keyWord,
          orderCode : _that.search.orderCode,
          orderName: _that.search.orderName,
          beginTime: _that.search.beginTime,
          endTime: _that.search.endTime,
          billStatus:_that.search.billStatus
        };
      }

      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      if (_that.search.keyWord) {
        var data = {
          "params": JSON.stringify(params),
          "page": JSON.stringify(page),
        }
      } else {
        var data = {
          "params": JSON.stringify(params),
          "page": JSON.stringify(page),
        }
      }

      // console.log(data);
      getInfo(data).then(response => {
        // console.log("tableData", response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },
    //增加
    addBtn(formName) {

      const _that = this;
      // console.log("_that.ruleForm", _that.ruleForm);
      if (_that.selected.length < 1) {
        _that.$message.error("请选择省市区");
      }
      _that.$refs[formName].validate((valid) => {
        // console.log(valid);
        if (valid) {
          // console.log("ruleForm",_that.ruleForm);

          var dataForm = {
            idIndustry: _that.ruleForm.industryName.split(",")[1],
            industryName: _that.ruleForm.industryName.split(",")[0],
            clientName: _that.ruleForm.clientName,
            contactMan: _that.ruleForm.contactMan,
            contactPhone: _that.ruleForm.contactPhone,
            province: _that.selected[0],
            city: _that.selected[1],
            area: _that.selected[2],
            address: _that.ruleForm.address,
            overdraftQuota: _that.ruleForm.overdraftQuota * 100,
            idLevel: _that.ruleForm.levelName.split(",")[1],
            levelName: _that.ruleForm.levelName.split(",")[0],
            idPayMode: _that.ruleForm.payMode.split(",")[1],
            payMode: _that.ruleForm.payMode.split(",")[0]
          }
          // console.log("dataForm", dataForm);
          var info = JSON.stringify(dataForm)
          // console.log(info);
          var data = {
            "clientInfo": info,
          }

          // console.log("clientLevel",data);
          addInfo(data).then(res => {
            // console.log(res);
            if (res.httpCode == 200) {
              _that.dialogVisible = false
              _that.$message({
                message: '增加成功',
                type: 'success'
              });
              _that.tableRefresh();
            } else {
              _that.$message.error(res.msg)
            }
          }).catch(err => {
            _that.$message.error(err)
            _that.dialogVisible = false
          })
        } else {
          // console.log('error submit!!');
          return false;
        }
      });

    },

    //唤起修改
    handleUpdate(id) {
      const _that = this;
      _that.dialogTitle = '修改施工单信息'
      _that.dialogVisible = true
      _that.dialogStatus = '2';
      _that.byId = id;
      _that.iscityShow();
      var data = {
        idClient: id
      }

      getInfoById(data).then(res => {
        // console.log(res);
        var datas = res.data;
        // console.log("getInfoById",datas);
        var addArray = [];
        addArray.push(datas.province);
        addArray.push(datas.city)
        addArray.push(datas.area)
        _that.selected = addArray;

        _that.ruleForm = {
          id: id,
          idIndustry: datas.idIndustry,
          industryName: datas.industryName,
          clientName: datas.clientName,
          contactMan: datas.contactMan,
          contactPhone: datas.contactPhone,
          province: datas.province,
          city: datas.city,
          area: datas.area,
          address: datas.address,
          overdraftQuota: datas.overdraftQuota,
          idLevel: datas.idLevel,
          levelName: datas.levelName,
          idPayMode: datas.idPayMode,
          payMode: datas.payMode
        }

      }).catch(err => {
        _that.$message.error(err)
      })
    },
    //修改档案
    editBtn(formName) {
      const _that = this
      _that.$refs[formName].validate((valid) => {
        if (_that.ruleForm.industryName.split(",").length > 1) {
          var industryName = _that.ruleForm.industryName.split(",")[0];
          var idIndustry = _that.ruleForm.industryName.split(",")[1];
        } else {
          var industryName = _that.ruleForm.industryName;
          var idIndustry = _that.ruleForm.idIndustry;
        }
        if (_that.ruleForm.levelName.split(",").length > 1) {
          var levelName = _that.ruleForm.levelName.split(",")[0];
          var idLevel = _that.ruleForm.levelName.split(",")[1];
        } else {
          var levelName = _that.ruleForm.levelName;
          var idLevel = _that.ruleForm.idLevel;
        }
        if (_that.ruleForm.payMode.split(",").length > 1) {
          var payMode = _that.ruleForm.payMode.split(",")[0];
          var idPayMode = _that.ruleForm.payMode.split(",")[1];
        } else {
          var payMode = _that.ruleForm.payMode;
          var idPayMode = _that.ruleForm.idPayMode;
        }
        var dataForm = {
          id: _that.byId,
          idIndustry: idIndustry,
          industryName: industryName,
          clientName: _that.ruleForm.clientName,
          contactMan: _that.ruleForm.contactMan,
          contactPhone: _that.ruleForm.contactPhone,
          province: _that.ruleForm.province,
          city: _that.ruleForm.city,
          area: _that.ruleForm.area,
          address: _that.ruleForm.address,
          overdraftQuota: _that.ruleForm.overdraftQuota,
          idLevel: idLevel,
          levelName: levelName,
          idPayMode: idPayMode,
          payMode: payMode
        }
        // console.log("dataFormred",dataForm);
        var info = JSON.stringify(dataForm)
        var data = {
          "clientInfo": info,
        }
        // console.log(data);

        updatePrintBill(data).then(res => {
          // console.log(res);
          if (res.httpCode == 200) {
            _that.dialogVisible = false
            _that.$message({
              message: '修改成功',
              type: 'success'
            });
            _that.tableRefresh();
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
          _that.dialogVisible = true
        })
      })
    },
    //刷新表格
    tableRefresh() {
      //刷新变革
      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
        const {fullPath} = view
        // console.log(fullPath);
        this.$nextTick(() => {
          this.$router.replace({
            path: '/redirect' + fullPath
          })
          // this.$router.push(fullPath)
        })
      })
    },
    refreshSelectedTag() {
      //刷新变革
        this.$nextTick(() => {
          this.$router.replace({
            path: '/redirect' + "/printbill/list"
          })
          // this.$router.push(fullPath)
        })
    },

    //搜索
    searchData() {
      this.listData.page = 1;
      this.getTableInfo()
    },
    carEditOrderAddr(id, name) {
      this.$refs.address.outerVisible = true;
      this.$refs.address.idClient = id;
      this.$refs.address.clientName = name;
      var pageNum = 1;
      this.$refs.address.getInfo(pageNum, '');
      this.$refs.address.searchVal = '';
    },
    getAdress(adr) {
      // console.log(adr);
      // this.defaultAddress = adr;
      // // console.log(this.defaultAddress);
      // this.$forceUpdate();//重绘
    },
    //序号
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>
<style>
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
}

.stepList .el-card__body {
  padding: 10px;
}

:focus {
  outline: 0;
}

.area-select .area-selected-trigger {
  padding: 0px 20px 7px 12px !important;
}

.area-select {
  height: 40px !important;
}
</style>

<style lang="scss" scoped>
::v-deep .v-modal{
  z-index: -1 !important;
}
.card-tit {
  float: left;
  height: 100%;
  min-height: 200px;
  max-height: 200px;
  font-size: 14px;
  color: #7c7c7c;
  width: 20px;
  margin: 0 auto;
  line-height: 20px;
  padding: 20px;
  padding-left: 10px;
  border-right: 1px solid #ddd;
}

.area-select {
  height: 40px;
}

.filter-container {
  margin-bottom: 15px;
}

.print-tit {
  color: #7c7c7c;
}

.print-con {
  color: #333;
}

.item-print {
  margin-bottom: 10px;
}

.el-timeline {
  padding: 0px;
  padding-top: 15px;
}
</style>
