<template>
  <div class="container-list">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="deliveryOrderNo"
        label="交付单号"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.deliveryOrderNo"
            :disabled="scope.row.deliveryOrderNo ? false : true"
          >
            <p solt="content">
              {{
                scope.row.deliveryOrderNo ? scope.row.deliveryOrderNo : "---"
              }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="itemName"
        label="业务类型"
        width="180"
        align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.itemName"
            :disabled="scope.row.itemName ? false : true"
          >
            <p solt="content">
              {{ scope.row.itemName ? scope.row.itemName : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="tmName" label="商标名称" width="100" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.tmName"
            :disabled="scope.row.tmName ? false : true"
          >
            <p solt="content">
              {{ scope.row.tmName ? scope.row.tmName : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="nclOneCodes" label="类别" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.nclOneCodes"
            :disabled="scope.row.nclOneCodes ? false : true"
          >
            <p solt="content">
              {{ scope.row.nclOneCodes ? scope.row.nclOneCodes : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="nclOneCount" label="件数" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.nclOneCount.toString()"
            :disabled="scope.row.nclOneCount ? false : true"
          >
            <p solt="content">
              {{ scope.row.nclOneCount ? scope.row.nclOneCount : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="申请人" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.name"
            :disabled="scope.row.name ? false : true"
          >
            <p solt="content">
              {{ scope.row.name ? scope.row.name : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="totalSum" label="订单金额" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.totalSum"
            :disabled="scope.row.totalSum ? false : true"
          >
            <p solt="content">
              {{ scope.row.totalSum ? scope.row.totalSum : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="deliveryStatusName" label="交付状态" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.deliveryStatusName"
            :disabled="scope.row.deliveryStatusName ? false : true"
          >
            <p solt="content">
              {{
                scope.row.deliveryStatusName
                  ? scope.row.deliveryStatusName
                  : "---"
              }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="CreateDate" label="下单时间" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.CreateDate"
            :disabled="scope.row.CreateDate ? false : true"
          >
            <p solt="content">
              {{ scope.row.CreateDate ? scope.row.CreateDate : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="submitTime" label="递交时间" align="center"
        ><template slot-scope="scope">
          <el-tooltip
            placement="top"
            :content="scope.row.submitTime"
            :disabled="scope.row.submitTime ? false : true"
          >
            <p solt="content">
              {{ scope.row.submitTime ? scope.row.submitTime : "---" }}
            </p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="scope" align="center" width="150">
          <el-button
            size="mini"
            @click="
              $router.push({
                path: '/jd/jdindentdetail',
                query: {
                  deliveryOrderNo: 'JF201912161543hQCdUw',
                  channelUserId: 'a5EyZC8Ht/Gpm2rKPeDpoziYmdcA/nF0',
                  deliveryStatus: 'dsccl',
                  totalSum: '0.01'
                }
              })
            "
            >详情</el-button
          >
          <el-button size="mini" @click="drawerClick(scope)"
            >上传材料</el-button
          >
          <el-button size="mini">确认注册方案</el-button>
          <el-button size="mini">去注册</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    <!-- 抽屉 -->
    <el-drawer
      title="上传材料"
      custom-class="jdindentdetail-drawer"
      size="700px"
      :visible.sync="showUploadStuff"
    >
      <Drawer />
    </el-drawer>
  </div>
</template>

<script>
import Drawer from "@/components/drawer";
export default {
  components: {
    Drawer
  },
  data() {
    return {
      //初始页码
      currentPage: 1,
      //每页条数
      pageSize: 10,
      //表格数据
      tableData: [
        {
          needNo: "FW_GOODS-581976-1_6059523",
          channelServiceNo: "521111800127842646",
          deliveryOrderNo: "JF201912161543hQCdUw",
          tmName: "kl",
          nclOneCount: 1,
          nclOneCodes: "02",
          itemCode: "zzsbzc",
          itemName: "商标注册【自助申请】",
          totalSum: "0.01",
          name: "中国铁路北京局集团有限公司",
          deliveryStatus: "dsccl",
          deliveryStatusName: "待上传材料",
          payStatus: "yfk",
          payStatusName: "å·²ä»˜æ¬¾",
          CreateDate: "2019-12-16T07:43:03.000Z",
          submitTime: null,
          customerType: "ent",
          businessLicensePic: "",
          identityCardPic: "",
          gzwtsUrl: null,
          smwjUrl: null
        }
      ],
      showUploadStuff: false
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    drawerClick() {
      this.showUploadStuff = true;
    }
  }
};
</script>

<style lang="scss">
.container-list {
  margin-top: 0;
  background: #fff;
  max-height: 30%;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  margin-bottom: 30px;
  .el-table {
    th > .cell {
      text-align: center;
      font-weight: 500;
      color: #000;
    }
    td > .cell {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    td:last-child > .cell {
      text-align: center;
      white-space: inherit;
    }
  }
  .cell button {
    text-align: center;
    padding: 5px;
    margin: 0;
    border: 0;
    width: 100%;
    color: #0f8ee9;
    background: none;
  }
  .cell button:hover {
    background: none;
  }
  .el-table .has-gutter tr th {
    background-color: #eef2fb;
  }
  .pagination {
    background: #ebeef5;
    .el-pagination {
      width: 100%;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .el-drawer__header {
    width: 100%;
    margin: 0;
    padding: 8px 21px;
    background: #f6f9ff;
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      text-align: left;
    }
  }
  .el-drawer__body {
    padding: 23px 20px;
  }
}
</style>
