<template>
  <div class="list-container">
    <span class="tag">{{ title }}</span>
    <el-table
      :data="tableData"
      @sort-change="sortChangeHandle"
      border
      class="table-cont"
    >
      <el-table-column
        v-for="item in tableColumns"
        :key="item.label"
        :label="item.label"
        :width="item.widthsty"
        :min-width="item.minwidthsty"
        :prop="item.key"
        align="center"
        :sortable="
          [
            'viewTotal',
            'RoadShowTotal',
            'LastViewTime',
            'ExpireDay',
            'createTime',
            'Deadline',
          ].includes(item.key)
            ? 'custom'
            : false
        "
      >
        <template slot="header" slot-scope="scope">
          <template v-if="item.key === 'Deadline'">
            <div
              class="todolabel"
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <span>DL</span>
              <el-tooltip
                effect="dark"
                placement="top-start"
                content="未完成To Do任务的截止日期-当前日期"
              >
                <i class="el-icon-info" />
              </el-tooltip>
              <img
                :src="todoSrc"
                style="
                  margin-left: 5px;
                  width: 22px;
                  height: 22px;
                  cursor: pointer;
                "
              />
            </div>
          </template>
          <template v-else>
            <span>{{ item.label }}</span>
          </template>
        </template>

        <template slot-scope="{ row }">
          <span
            v-if="item.key === 'CompanyName'"
            @click="goDetail(row)"
            class="customName editsty"
          >
            {{ row.CompanyName }}
          </span>

          <span v-else-if="item.key === 'CompanyType'">
            <span :style="row.IsSuspend === 1 ? 'color:#bbb' : ''">{{
              row.CompanyType
            }}</span>
            <span v-if="row.FiccPackageType" class="ficc-package">{{
              row.FiccPackageType == 1 ? "大套餐" : "小套餐"
            }}</span>
          </span>

          <span v-else-if="item.key === 'City'">
            {{ `${row.Province}/${row.City}` }}
          </span>

          <span v-else-if="item.key === 'Status'">
            {{
              row.Status +
              (row.ApproveStatus ? "(" + row.ApproveStatus + ")" : "")
            }}
          </span>

          <span v-else-if="item.key === 'viewTotal'">
            {{ row.AllViewTotal }}
          </span>

          <span v-else-if="item.key === 'LastViewTime'">
            {{
              row.FiccLastViewTime
                ? `ficc： ${row.FiccLastViewTime}`
                : row.RaiLastViewTime
                ? `权益： ${row.RaiLastViewTime}`
                : "--"
            }}
          </span>

          <span v-else-if="item.key === 'EndDate'">
            <!-- 正常的时间显示 -->
            <template v-if="row.StartDate.indexOf('/') == -1">
              <template v-if="act_status == '流失'">
                创建时间：{{ row.CreatedTime | formatTime }}
              </template>
              <template v-else-if="row.Status == '永续'"> 永久 </template>
              <template v-else-if="act_status == '冻结'">
                {{ row.FreezeStartDate }}~{{ row.FreezeEndDate }}
              </template>
              <template v-else>
                {{ row.StartDate }}~{{ row.EndDate }}
              </template>
            </template>
            <!-- 公用客户的时间显示 -->
            <template v-else>
              {{ row.StartDate.substr(0, 10) }}~{{
                row.EndDate.substr(0, 10)
              }}/{{ row.StartDate.substr(11) }}~{{ row.EndDate.substr(11) }}
            </template>
          </span>
          <span v-else-if="item.key==='Deadline'">{{row[item.key]||'--'}}</span>
          <span v-else>{{ row[item.key]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        :prop="'createTime'"
        :label="'创建时间'"
        sortable="custom"
        align="center"
        min-width="105"
      >
        <template slot-scope="{ row }">
          <span>
            {{ $moment(row.CreatedTime).format("YYYY.MM.DD") }}
          </span>
        </template>
      </el-table-column>
      <div slot="empty" style="lineheight: 44px; margin: 60px 0; color: #999">
        <img
          src="~@/assets/img/cus_m/nodata.png"
          alt=""
          style="display: block; width: 160px; height: 128px; margin: auto"
        />
        <span>暂无数据</span>
      </div>
    </el-table>
    <div class="bottom">
      <m-page
        :total="total"
        :page_no="page_no"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { dataMainInterface } from "@/api/api.js";
import mPage from "@/components/mPage.vue";

export default {
  name: "",
  components: { mPage },
  data() {
    return {
      title: "",
      ids: "", //公司id
      tableData: [],
      tableColumns: [
        {
          label: "客户名称",
          key: "CompanyName",
          minwidthsty: "180px",
        },
        {
          label: "DL",
          key: "Deadline",
          minwidthsty: "80px",
        },
        {
          label: "类型",
          key: "CompanyType",
          widthsty: "80px",
        },
        {
          label: "所属行业",
          key: "IndustryName",
        },
        {
          label: "客户地址",
          key: "City",
          widthsty: "110px",
        },
        {
          label: "所属销售",
          key: "SellerName",
        },
        {
          label: "客户状态",
          key: "Status",
          // widthsty: '180px',
        },
        {
          label: "阅读次数",
          key: "viewTotal",
          widthsty: "110px",
        },
        {
          label: "路演次数",
          key: "RoadShowTotal",
          widthsty: "110px",
        },
        {
          label: "阅读时间",
          key: "LastViewTime",
          widthsty: "180px",
        },
        {
          label: "服务期限",
          key: "EndDate",
          minwidthsty: "180px",
        },
        {
          label: "到期天数",
          key: "ExpireDay",
          widthsty: "110px",
        },
      ],
      sort_obj: {
        param: "",
        type: "",
      }, //排序字段
      total: 0,
      page_no: 1,
      pageSize: 10,
      todoSrc: require("@/assets/img/icons/todo.png"),
    };
  },
  methods: {
    /* 获取数据	 */
    getTableData() {
      const { param, type } = this.sort_obj;

      dataMainInterface
        .newcustomList({
          PageSize: this.pageSize,
          CurrentIndex: this.page_no,
          SortParam: param,
          SortType: type,
          CompanyIds: this.ids,
        })
        .then((res) => {
          const { Ret, Data } = res;
          if (Ret !== 200) return;

          this.total = res.Data.Paging.Totals;
          this.tableData = Data.List || [];
        });
    },

    /* 切换页码 */
    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
    },

    /* 排序变化时 */
    sortChangeHandle({ prop, order }) {
      console.log(prop, order);
      this.page_no = 1;

      const typeMap = {
        RoadShowTotal: "roadShowTotal",
        LastViewTime: "viewTime",
        ExpireDay: "expireDay",
        Deadline: "deadline",
      };
      if (prop === "Deadline") {
        const { param } = this.sort_obj;
        this.sort_obj = {
          type: param === typeMap[prop] ? "" : "asc",
          param: param === typeMap[prop] ? "" : typeMap[prop],
        };
      } else {
        this.sort_obj = {
          type:
            order === "ascending"
              ? "asc"
              : order === "descending"
              ? "desc"
              : "",
          param: typeMap[prop] || prop,
        };
      }

      this.getTableData();
    },

    /* 前往详情页 */
    goDetail({ CompanyId }) {
      this.$router.push({
        path: "/customDetail",
        query: {
          id: CompanyId,
        },
      });
    },
  },
  /* 页面跳转前记录参数 */
  beforeRouteLeave(to, form, next) {
    let backData = {
      page_no: this.page_no,
      ids: this.ids,
      title: this.title,
    };
    sessionStorage.setItem("newCustomBack", JSON.stringify(backData));
    localStorage.removeItem("newCustomBack");
    next();
  },
  /* 页面进入前是否清除参数 */
  beforeRouteEnter(to, from, next) {
    if (from.path != "/customDetail") {
      sessionStorage.removeItem("newCustomBack");
    }
    next();
  },
  mounted() {
    if (this.$route.query.ids) {
      this.ids = decodeURIComponent(this.$route.query.ids);
      this.title = decodeURIComponent(this.$route.query.title);
      let backData = {
        page_no: this.page_no,
        ids: this.ids,
        title: this.title,
      };
      localStorage.setItem("newCustomBack", JSON.stringify(backData));
    }

    if (sessionStorage.getItem("newCustomBack")) {
      let { page_no, ids, title } = JSON.parse(
        sessionStorage.getItem("newCustomBack")
      );
      this.page_no = page_no;
      this.ids = ids;
      this.title = title;
    }else if(localStorage.getItem("newCustomBack")){
      let { page_no, ids, title } = JSON.parse(
        localStorage.getItem("newCustomBack")
      );
      this.page_no = page_no;
      this.ids = ids;
      this.title = title;
    }
    this.ids && this.getTableData();
  },
};
</script>
<style lang="scss">
.todolabel {
  & + span.caret-wrapper {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.list-container {
  min-height: calc(100vh - 120px);
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 30px 20px;
  .tag {
    padding: 10px 24px;
    display: inline-block;
    background: #e8f3ff;
    color: #2d8cf0;
    font-size: 14px;
    border-radius: 4px;
  }
  .table-cont {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .bottom {
    height: 40px;
  }
}
</style>
