<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-input v-model="listQuery.baojianbianhao" placeholder="报检编号" clearable style="width: 200px" @keyup.enter.native="handleFilter" />
          <el-select v-show="this.$store.getters.clientType !== 'Enterprise'" v-model="listQuery.zzdwId" placeholder="受检单位" filterable clearable @keyup.enter.native="handleFilter">
            <el-option v-for="item in zzdwList" :key="item.id" :label="item.zhizaodanwei" :value="item.id" />
          </el-select>
          <el-input v-model="listQuery.chanpinbianhao" placeholder="产品编号" clearable style="width: 200px" @keyup.enter.native="handleFilter" />
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
          <br>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="list"
      :data="list"
      :row-class-name="tableRowClassName"
      fit
      highlight-current-row
      border
      stripe
      height="600px"
      width="100%"
      @row-click="onRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column align="center" type="index" width="50" label="序号" />
      <el-table-column align="center" prop="baojianbianhao" label="报检编号" />
      <el-table-column align="center" prop="shiyongdanwei" label="受检单位" />
      <el-table-column :formatter="formatter.getChineseName" align="center" prop="createBy" label="检验员" />
      <el-table-column align="center" prop="createTime" label="日期" :formatter="formatterCreateTime" />
      <el-table-column align="center" width="140" fixed="right" label="打印状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.printStatus" type="success">
            已打印
          </el-tag>
          <el-tag v-else type="danger">
            未打印
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-search" title="详情" @click="showDetailsInit(scope.row.id)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageRow" @pagination="getList" />
    <el-dialog title="收费单详情列表" width="70%" :visible.sync="sfdListVisible" @close="sfdListVisible = false">
      <el-form>
        <el-form-item>
          编号:
          <el-input v-model="sfd.shoufeidanhao" disabled clearable type="small" style="width: 120px" />
          受检单位:
          <el-select v-model="sfd.zzdwId" disabled clearable type="small" style="width: 250px">
            <el-option v-for="item in zzdwList" :key="item.id" :label="item.zhizaodanwei" :value="item.id" />
          </el-select>
          检验员：
          <el-select v-model="sfd.createBy" disabled type="small" style="width: 120px;">
            <el-option v-for="item in inspectors" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
          日期：
          <el-date-picker v-model="sfd.createTime" type="date" disabled style="width: 140px" />
          <el-button type="success" icon="el-icon-printer" @click="printSfdDetails">
            打印收费通知单
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="tableDetailsList"
        :data="tableDetailsList"
        border
        fit
        highlight-current-row
        style="margin-top: 5px;"
        stripe
        :summary-method="getSummaries"
        show-summary
        @row-click="onSfdClick"
        @selection-change="handleSelectionChangeDetails"
      >
        <el-table-column type="selection" width="60" />
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column align="center" label="检验证书编号" prop="baogaobianhao" min-width="140" />
        <el-table-column align="center" label="产品编号" prop="chanpinbianhao" min-width="140" />
        <el-table-column align="center" label="受检设备(产品)型号 " prop="guigexinghao" min-width="140" />
        <el-table-column align="center" label="检验项目(或产品出厂价格) " prop="zaojia" min-width="80" />
        <el-table-column align="center" label="应收检验费金额" prop="yingjiaojine" min-width="80" />
        <el-table-column align="center" label="是否办结 " prop="flowstatus" min-width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.flowstatus === 4 && (!scope.row.restartstatuslevel || scope.row.restartstatuslevel === 0)" type="success">
              已办结
            </el-tag>
            <el-tag v-else type="danger">
              未办结
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="缴费状态 " prop="jfState" min-width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.jfState" type="success">
              已交费
            </el-tag>
            <el-tag v-else type="danger">
              未交费
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="附件" fixed="right">
          <template slot-scope="scope">
            <el-button type="info" size="small" circle icon="el-icon-info" title="编辑相关鉴证" @click="showVerification(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="查看相关鉴证" :modal-append-to-body="false" :visible.sync="dialogEnclosureVisible">
      <enclosure :relation-id.sync="currentRenwuId" :if-liaison.sync="ifLiaison" :view-button.sync="viewButton" />
    </el-dialog>
  </div>
</template>
<script>
import Enclosure from '@/views/common/Enclosure'
import Pagination from '@/components/Pagination'
import qs from 'qs'
export default {
  name: 'ContainerChargeNotice',
  components: { Pagination, Enclosure },
  data() {
    return {
      list: [], // 收费通知单列表
      zzdwList: [], // 制造单位列表
      listQuery: {
        pageNum: 1, // 页码
        pageRow: 20, // 每页条数
        jianyanleibie: 'ZJ',
        shebeizhongleidaima: '2000',
        printStatus: false
      },
      tableDetailsList: [], // 收费通知单详情列表
      total: 0,
      isPrint: true,
      sfd: {},
      sfdListVisible: false,
      selection: [],
      selectionDetails: [],
      dialogEnclosureVisible: false,
      currentRenwuId: '',
      viewButton: false,
      ifLiaison: false,
      departmentId: this.$store.getters.departmentId,
      inspectors: [] // 检验员
    }
  },
  created() {
    this.getZzdwList()
    this.getList()
    this.getInspectorsList()
  },
  methods: {
    /**
     * 打印收费通知单
     */
    printSfdDetails() {
      if (this.selectionDetails.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择收费通知项！'
        })
        return false
      }
      let ifConduct = true
      const pks = []
      this.selectionDetails.forEach(item => {
        if (!(item.flowstatus === 4 && (!item.restartstatuslevel || item.restartstatuslevel === 0))) {
          ifConduct = false
          this.$message({
            type: 'info',
            message: '收费通知项存在未办结设备！'
          })
          return false
        }
        pks.push(item.id)
      })
      if (ifConduct) {
        // 组织数据
        this.apibjd({
          url: '/sfd/getSfdPrintDataBySfdId',
          method: 'get',
          params: { sfdId: this.sfd.id, pks: pks },
          paramsSerializer: function(params) {
            return qs.stringify(params, { indices: false })
          }
        }).then(data => {
          this.preview({
            url: '/print/generatePdfListing',
            method: 'post',
            data: {
              info: data.info,
              paramList: data.paramList,
              viewType: 'SFD'
            }
          }).then(data => {
            data = data.replace(/\\/g, '/')
            window.open(data)
          })
        })
      }
    },
    /**
     * 获得检验员
     */
    getInspectorsList() {
      this.api({
        url: '/user/getInspector',
        method: 'get',
        params: { departmentId: this.departmentId }
      }).then(data => {
        this.inspectors = data
      })
    },
    /**
     * 指定列求和
     */
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'yingjiaojine') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return this.common.accAdd(prev, curr)
            } else {
              return prev
            }
          }, 0)
          sums[index]
        }
      })
      return sums
    },
    /**
     * 显示相关鉴证文件窗口
     * @param renwuId
     */
    showVerification(renwuId) {
      this.dialogEnclosureVisible = true
      this.currentRenwuId = renwuId
    },
    /**
     * 获得收费通知单详情列表
     */
    showDetailsInit(sfdId) {
      this.apibjd({
        url: '/sfd/getSfdById',
        method: 'get',
        params: { sfdId: sfdId }
      }).then(data => {
        this.sfd = data.sfd
        this.sfd.zzdwId = this.sfd.zzdwId + ''
        this.sfd.createBy = parseInt(this.sfd.createBy)
        this.tableDetailsList = data.ysjlSfdList
        this.sfdListVisible = true
      })
    },
    /**
     *  查询
     */
    handleFilter() {
      // 查询事件
      this.listQuery.pageNum = 1
      this.getList()
    },
    /**
     * 收费通知单列表
     */
    getList() {
      this.apibjd({
        url: '/sfd/listPage',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    /**
     *  获得制造单位
     */
    getZzdwList() {
      const queryZzdw = {
        creatingState: true,
        inspectorIfEmpty: false
      }
      const username = this.$store.getters.username
      if (username && username !== 'admin') {
        queryZzdw.zhuchangjianyanrenyuan = this.$store.getters.userId
      }
      this.api({
        url: '/dwxx/getAll',
        method: 'get',
        params: queryZzdw
      }).then(data => {
        this.zzdwList = data
      })
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 表格单击选中行
    onRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    handleSelectionChange(val) {
      this.selection = val
    },
    handleSelectionChangeDetails(val) {
      this.selectionDetails = val
    },
    onSfdClick(row) {
      this.$refs.tableDetailsList.toggleRowSelection(row)
    },
    /**
     *  列格式化创建日期
     */
    formatterCreateTime(row, column, cellValue) {
      if (cellValue) {
        const arry = cellValue.split(' ')
        return arry[0]
      }
    }
  }
}
</script>
