<template>
  <div class="coldfood">
    <div class="search-wrapper">
      <el-form :inline="true" :model="searchForm" class="search_form">
        <el-form-item label="联系人">
          <el-input v-model="searchForm.name" placeholder="请输入联系人名称" @keyup.enter.native="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrapper">
      <table-template :tableData="tableData" :tableColumns="tableColumns" :loading="loading" :pagination="pagination"
        @Jump="jumpPage">
        <el-table-column key="stateName" prop="onlineName" label="预约状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.type">{{ scope.row.stateName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220" align="left">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" round @click="view(scope.row)">查看</el-button>
            <el-button v-if="scope.row.state === 0" type="danger" size="mini" round @click="deny(scope.row)">退回
            </el-button>
          </template>
        </el-table-column>
      </table-template>
    </div>
    <el-dialog title="申报单详情" :visible.sync="viewShow" width="800px" :close-on-press-escape="false">
      <div class="content">
        <div class="goods">
          <div class="cell_title">联系人信息</div>
          <div class="cell">
            <p class="label">联系人姓名</p>
            <p class="value">{{ viewDetail.name }}</p>
          </div>
          <div class="cell">
            <p class="label">手机号码</p>
            <p class="value">{{ viewDetail.phone }}</p>
          </div>
          <div class="cell_title">车辆信息</div>
          <div class="cell">
            <p class="label">车牌号</p>
            <p class="value">{{ viewDetail.carNumber }}</p>
          </div>
          <div v-for="driver in viewDetail.driverSelfList" :key="driver.driverSelfCode">
            <div class="cell">
              <p class="label">司机姓名</p>
              <p class="value">{{ driver.driverName }}</p>
            </div>
            <div class="cell">
              <p class="label">联系方式</p>
              <p class="value">{{ driver.driverPhone }}</p>
            </div>
            <div class="cell">
              <p class="label">身份证</p>
              <p class="value">{{ driver.idCard }}</p>
            </div>
          </div>

          <div class="cell_title">商品信息</div>
          <el-tabs type="card" style="padding: 0 10px">
            <el-tab-pane v-for="item in viewDetail.goodsList" :key="item.goodsSelfCode" :label="item.goodsName">
              <div class="cell">
                <p class="label">报关单号(海关编号)</p>
                <p class="value">{{ item.customs }}</p>
              </div>
              <div class="cell">
                <p class="label">货主所属企业名称</p>
                <p class="value">{{ item.shipperEnterprise }}</p>
              </div>
              <div class="cell">
                <p class="label">统一社会信用代码</p>
                <p class="value">{{ item.credit }}</p>
              </div>
              <div class="cell">
                <p class="label">货主联系人</p>
                <p class="value">{{ item.shipper }}</p>
              </div>
              <div class="cell">
                <p class="label">货主联系方式</p>
                <p class="value">{{ item.shipperPhone }}</p>
              </div>
              <div class="cell">
                <p class="label">货主身份证号码</p>
                <p class="value">{{ item.shipperIdCard }}</p>
              </div>
              <div class="cell">
                <p class="label">是否有集装箱</p>
                <p class="value">{{ item.container === "1" ? "是" : "否" }}</p>
              </div>
              <div class="cell">
                <p class="label">商品名称</p>
                <p class="value">{{ item.goodsName }}</p>
              </div>
              <div class="cell">
                <p class="label">原产地</p>
                <p class="value">{{ item.placeOrigin }}</p>
              </div>
              <div class="cell">
                <p class="label">注册编号</p>
                <p class="value">{{ item.register }}</p>
              </div>
              <div class="cell">
                <p class="label">生产日期</p>
                <p class="value">{{ item.productionTime }}</p>
              </div>
              <div class="cell">
                <p class="label">生产批号</p>
                <p class="value">{{ item.productionNumber }}</p>
              </div>
              <div class="cell">
                <p class="label">总重量(KG)</p>
                <p class="value">{{ item.weight }}</p>
              </div>
              <div class="cell">
                <p class="label">是否在镇江销售</p>
                <p class="value">{{ item.goodsState === 1 ? "是" : "否" }}</p>
              </div>
              <div class="photo">
                <div class="pitem" v-for="photo in item.pictureList" :key="photo.pictureType">
                  <el-image style="height: 100px; max-width: 150px" :src="photo.picture"
                    :preview-src-list="[photo.picture]" :z-index="7777777">
                  </el-image>
                  <p>
                    {{
                    photo.pictureType === 1
                    ? "报关单照片"
                    : photo.pictureType === 2
                    ? "货物清单照片"
                    : photo.pictureType === 3
                    ? "检疫证照片"
                    : "有效《出库证明》"
                    }}
                  </p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableTemplate from "@/components/Table";
import { changeList, setName, setTel, setCertNo } from "@/utils";
import { getSelfList, updateSelf, selfDetail } from "@/api/coldfood";
import { Message } from "element-ui";

export default {
  components: { TableTemplate },
  data() {
    return {
      userName: "",
      searchForm: {
        name: ""
      },
      loading: false,
      options: [
        {
          state: 0,
          stateName: "已提交",
          type: "warning"
        },
        {
          state: 1,
          stateName: "已退回",
          type: "warning"
        }
      ],
      tableData: [],
      tableColumns: [
        {
          key: "driverNo",
          label: "货物编号"
        },
        {
          key: "name",
          label: "联系人"
        },
        {
          key: "phone",
          label: "手机号"
        },
        {
          key: "carNumber",
          label: "车牌号"
        },
        {
          key: "createTime",
          label: "申报时间",
          width: 250
        }
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      viewShow: false,
      viewDetail: {}
    };
  },
  methods: {
    init() {
      this.loading = true;
      let params = {
        name: this.searchForm.name,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      };
      getSelfList(params).then(res => {
        this.loading = false;
        if (res.success) {
          this.pagination.total = res.data.total;
          if (res.data.total != 0) {
            this.tableData = res.data.list.map(item => {
              (item.stateName = this.getSatusArr(item.state).stateName),
                (item.type = this.getSatusArr(item.state).type);
              return item;
            });
            if (localStorage.getItem('userName') == 'admin') {
              this.tableData = changeList(this.tableData)
            }
          } else {
            this.tableData = []
          }
        }
      });
    },
    jumpPage() {
      this.init();
    },
    onSubmit() {
      this.pagination.currentPage = 1;
      this.init();
    },
    view(row) {
      let params = {
        chainSelfCode: row.chainSelfCode
      };
      selfDetail(params).then(res => {
        this.viewDetail = res.data;
        if (localStorage.getItem('userName') == 'admin') {
          this.viewDetail.name = setName(this.viewDetail.name)
          this.viewDetail.phone = setTel(this.viewDetail.phone)
          this.viewDetail.driverSelfList[0].driverName = setName(this.viewDetail.driverSelfList[0].driverName)
          this.viewDetail.driverSelfList[0].driverPhone = setTel(this.viewDetail.driverSelfList[0].driverPhone)
          this.viewDetail.driverSelfList[0].idCard = setCertNo(this.viewDetail.driverSelfList[0].idCard)
        }
        this.viewShow = true;
      });
    },
    deny(row) {
      this.$confirm("确定回退该预约申报吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            chainSelfCode: row.chainSelfCode,
            state: 1
          };
          updateSelf(params).then(res => {
            console.log(res);
            Message.success("审核回退");
            this.init();
          });
        })
        .catch(() => {
          // console.log("取消");
        });
      // console.log(row);
    },
    getSatusArr(state) {
      return this.options.filter(item => {
        return item.state === state;
      })[0];
    }
  },
  created() {
    this.userName = localStorage.getItem('userName');
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';

.content {
  max-height: 600px;
  overflow-y: auto;

  .goods {
    .cell_title {
      margin-top: 20px;
      padding: 10px;
      border-bottom: 1px solid #eee;
      font-size: 18px;
      color: #333;
      font-weight: 600;
      text-align: left;
    }

    .cell {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;

      .label {
        width: 150px;
        color: #999;
        text-align: left;
      }

      .value {
        color: #000;
        text-align: left;
      }
    }

    .photo {
      height: 150px;
      padding: 0 20px;
      display: flex;
      align-items: center;

      .pitem {
        margin-right: 20px;

        img {
          width: 100px;
          height: 100px;
        }

        p {
          margin-top: 10px;
          text-align: center;
          font-size: 16px;
          color: #999999;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 2px;
}
</style>