<template>
  <div class="app-container" style="padding: 0px !important;">
    <div class="market-top">
      <el-form
        :model="searchArray"
        ref="searchArrayRef"
        size="small"
        :inline="true"
        style="margin-top:20px;"
      >
        <el-form-item label="完成状态" prop="status">
          <el-select v-model="searchArray.status" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="导入状态" prop="importStatus" v-if="marketTaskId">
          <el-select v-model="searchArray.importStatus" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              :key="1"
              value="1"
              label="成功"
            ></el-option>
            <el-option
              :key="2"
              value="2"
              label="失败"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否逾期" prop="isOverdue">
          <el-select v-model="searchArray.isOverdue" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              :key="1"
              value="1"
              label="是"
            ></el-option>
            <el-option
              :key="0"
              value="0"
              label="否"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户信息" prop="custInfo">
          <el-input
            v-model="searchArray.custInfo"
            placeholder="请输入客户号/客户名"
            clearable
            style="width:100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="柜员信息" prop="userInfo" v-if="marketTaskId">
          <el-input
            v-model="searchArray.userInfo"
            placeholder="请输入柜员号/柜员名"
            clearable
            style="width:100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="searchFn">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetFn">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button
        type="plain"
        size="mini" 
        class="add-btn"
        @click="goBackToIndex"
        v-if="marketTaskId"
      >返回</el-button>
    </div>
    <el-table v-loading="loading" :data="tableData" :height="dyHeight" :key="tableKey">
      <template>
        <el-table-column label="序号" prop="xh" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="营销任务" width="200" prop="marketTaskName" min-width="100" show-overflow-tooltip />
        <el-table-column label="客户姓名" prop="custName" min-width="100" show-overflow-tooltip />
        <el-table-column label="客户号" width="200" prop="custId" min-width="140" show-overflow-tooltip />
        <el-table-column label="客户类型" prop="custType" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.custType | formatFilter('custType',custTypeList) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="柜员号" v-if="marketTaskId" prop="userName" min-width="100" show-overflow-tooltip />
        <el-table-column label="柜员姓名" prop="nickName" min-width="100" show-overflow-tooltip />
        <el-table-column label="机构" v-if="marketTaskId" prop="deptName" min-width="100" show-overflow-tooltip />
        <el-table-column label="完成状态" prop="status" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.status | formatFilter('status',statusList) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="导入状态" v-if="marketTaskId" prop="importStatus" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.importStatus === '1'">成功</span>
            <span v-else>失败</span>
          </template>
        </el-table-column>
        <el-table-column label="失败原因" v-if="marketTaskId" prop="failureReason" min-width="100" show-overflow-tooltip>
          </el-table-column>
        <el-table-column label="是否已读" v-if="isFeedback === '0'" prop="isReed" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.isReed === '0'">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column label="是否逾期" width="100" prop="isOverdue" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.isOverdue === '0'">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="200" prop="endTime" min-width="100" show-overflow-tooltip />
        <el-table-column label="备注" v-if="isFeedback === '1' || !marketTaskId" prop="remark" min-width="100" show-overflow-tooltip />
      </template>
    </el-table>
    <div class="pagination_end">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        @current-change="currentChangeFn"
        :total="total"
        @size-change="sizeChangeFn"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  marketTaskListDetail,
  marketTaskListMy
} from "@/api/task/markettask.js";
import _ from "lodash";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
export default {
  name: "workmngdaytaskindex",
  components: { },
  computed: {
    ...mapGetters(["roles"]),
    marketTaskId() {
      return this.$route.query.marketTaskId
    },
    isFeedback() {
      return this.$route.query.isFeedback
    }
  },
  data() {
    return {
      custTypeList: [
        {
          label: "个人",
          value: "0"
        },
        {
          label: "企业",
          value: "2"
        },
        {
          label: "商户",
          value: "1"
        },
      ],
      statusList: [
        {
          label: "未完成",
          value: "0"
        },
        {
          label: "部分完成",
          value: "1"
        },
        {
          label: "已完成",
          value: "2"
        }
      ],

      searchArray: {
        custInfo: "",
        status: '',
        isOverdue: '',
        userInfo: ''
      },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      loading: false,
      dyHeight: {},
      tableKey: false,
      dialogTitle: '营销任务创建'
    };
  },
  created() {
    window.addEventListener("resize", () => {
      this.dyHeight = Number(window.innerHeight) - 330;
    });
    this.dyHeight = Number(window.innerHeight) - 330;
    this.resetFn();
  },
  filters: {
    formatFilter(v, type, list) {
      if (type == "status" || type == "custType") {
        let arr = _.filter(list, { value: v });
        return arr.length > 0 ? arr[0].label : '';
      }
    }
  },
  methods: {
    resetFn() {
      this.searchArray = {
        custInfo: "",
        status: '',
        isOverdue: '',
        userInfo: ''
      };
      this.searchFn();
    },
    searchFn() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.total = 0;
      this.queryListFn();
    },
    queryListFn() {
      this.loading = true;
      let p = {
        ...this.searchArray,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        marketTaskId: this.marketTaskId
      };
      const API = this.marketTaskId ? marketTaskListDetail : marketTaskListMy
      API(p).then(response => {
        this.loading = false;
        if (response.code == 200) {
          this.tableData = response.rows || [];
          this.total = response.total || 0;
        } else {
          this.$message.error(response.msg || "操作失败");
        }
        this.tableKey = !this.tableKey;
      });
    },
    currentChangeFn(val) {
      this.pageNum = val;
      this.queryListFn();
    },
    sizeChangeFn(val) {
      this.pageSize = val;
      this.queryListFn();
    },
    onRefreshTable() {
      this.pageNum = 1
      this.queryListFn();
    },
    handleImport() {
      this.$refs.importModal.onOpen()
    },
    editFn(row) {
      this.dialogTitle = "营销任务编辑";
      this.handleImport()
    },
    lookFn(row) {
      this.$router.push({
        path: '/workmng/markettaskdetail',
        query: {
          marketTask: row.id,
          backUrl: '/workmng/markettask'
        }
      })
    },
    goBackToIndex() {
      const { query } = this.$route
      if (query.backUrl) {
        this.$router.replace({
          path: query.backUrl,
          query
        })
      } else {
        this.$router.go(-1)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.market-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .add-btn {
    height: 32px;
    margin-top: 20px;
  }
}
.pagination_end {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.header-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;

  .el-radio-button {
    flex: 1;

    ::v-deep .el-radio-button__inner {
      width: 100%;
      border: none;
      font-weight: 400;
      letter-spacing: 0.44px;
      line-height: 25px;
      font-size: 16px;
      color: #666666;
      padding: 11px 0 12px 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #4886f8;
      font-weight: 400;
      color: #ffffff;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:nth-child(2) {
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 21px;
        width: 1px;
        background: #ebebeb;
        z-index: 1;
      }

      &::after {
        right: 1px;
      }
    }

    &.is-active {
      &::before,
      &::after {
        content: none;
      }
    }
  }
}
</style>