<template>
  <div class="app-container">
    <el-table
      size="mini"
      tooltip-effect="light"
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      ref="multipleTable"
      border
      default-expand-all>
      <el-table-column
        label="#"
        align="center"
        type="index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        label="施工单号"
        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
        label="印品名称"
        width="140px"
        show-overflow-tooltip
      >
        <template slot-scope="{row}">
          <span @click.stop="handleDetail(row.id)" style="color: #409EFF;cursor: pointer"
                class="ellipsis"> {{ row.billName }}</span>
        </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"
        show-overflow-tooltip
        label="客户名称">
        <template slot-scope="{row}">
          <span class="ellipsis"> {{ 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>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                :limit.sync="listData.pageSize" @pagination="getTableInfo"/>
    <printbill-detail ref="printbillDetail"></printbill-detail>
    <print-step ref="printStep"></print-step>
    <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 {
      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: "",
      },
      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: ""
    }
  },
  mounted() {
    this.getTableInfo();
  },
  methods: {
    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.sMessage = "";
        _that.$refs.orderMessage.getList()
      })
    },
    getOrderProduceInfos(str){
      // console.log(str)
      var newStr = str.replace(/`/g,"<br/>")
      // console.log(newStr);
      return newStr
    },

    getOrderStep(id) {
      const _that = this;

      _that.$refs.printStep.idOrder = id;
      _that.$refs.printStep.drawer = true;
      _that.$refs.printStep.getStep();
    },
    handleDetail(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail()
    },
    //获取列表
    getTableInfo() {
      const _that = this
      _that.listLoading = true;
      var params = {
        voidFlag: 0,
        keyWord: _that.$route.query.printbillCode
      };

      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      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
      })
    },
    //序号
    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>
.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>
