<template>
  <div class="app-container" style="padding: 0px !important;">
    <el-date-picker
      v-model="reportTime" 
      placeholder="请选择日期"
      @change="initCardList"
      class="time-picker"
    />
    <el-row :gutter="24" style="padding: 0 30px;margin-left: -15px;">
        <el-col :span="6">
            <el-card class="box-card">
                <div class="my-span-checklist-title">
                    总预警推送次数
                </div>
                <div class="my-span-checklist-main">
                    <span>{{ cardInfo.alterCount }}</span>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card1">
                <div class="my-span-checklist-title">
                    反馈完成率
                </div>
                <div class="my-span-checklist-main">
                    <span>{{ cardInfo.completeRate + '%' }}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <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="alterType">
        <el-input
          v-model="searchArray.alterType"
          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-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="120" prop="custName" min-width="100" show-overflow-tooltip />
        <el-table-column label="客户号" width="230" prop="custId" min-width="140" show-overflow-tooltip />
        <el-table-column label="客户内码" width="200" prop="custIsn" min-width="140" show-overflow-tooltip />
        <el-table-column label="客户经理" width="200" prop="userInfo" min-width="140" show-overflow-tooltip />
        <el-table-column label="预警类型" width="250" prop="alterType" min-width="100" show-overflow-tooltip />
        <el-table-column label="预警详情" prop="alterDetail" min-width="100" show-overflow-tooltip />
        <el-table-column label="是否已读" 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="250" prop="remark" min-width="100" show-overflow-tooltip />
        <el-table-column label="状态" width="150" 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="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="editFn(scope.row)">处理</el-button>
          </template>
        </el-table-column> -->
      </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>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="visibleFlag"
      width="800px"
      append-to-body
      v-if="visibleFlag"
    >
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="客户姓名" prop="custName">
              <el-input
                v-model="dialogForm.custName"
                placeholder="请输入客户姓名"
                clearable
                style="width:100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客户号" prop="custId">
              <el-input
                v-model="dialogForm.custId"
                placeholder="请输入客户号"
                clearable
                style="width:100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预警类型" prop="alterType">
              <el-input
                v-model="dialogForm.alterType"
                placeholder="请输入预警类型"
                clearable
                style="width:100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="预警详情" prop="alterDetail">
              <el-input
                v-model="dialogForm.alterDetail"
                placeholder="请输入预警详情"
                clearable
                style="width:100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="dialogForm.status"
                placeholder="请选择状态"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="dialogForm.remark"
                placeholder="请输入备注"
                clearable
                style="width:100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="dialogOkfn">确 定</el-button>
        <el-button @click="dialogCancelfn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  warningworkRecordList,
  warningworkRecordSubmit,
  warningCardNum
} from "@/api/system/home";
import _ from "lodash";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
export default {
  name: "workmngdaytaskindex",
  computed: {
    ...mapGetters(["roles"]),
    isShowFlag() {
      let arr = _.intersection(this.roles, [
        "admin",
        "headAdmin",
        "branchAdmin",
        "headPublic",
        "headPrivate",
        "outletAdmin",
        "headOps"
      ]);
      if (arr.length > 0) {
        return true;
      } else {
        return false;
      }
    }
  },
  data() {
    return {
      reportTime: new Date(),
      cardInfo: {
          alterCount: '',
          completeRate: '',
      },
      statusList: [
        {
          label: "未完成",
          value: "0"
        },
        {
          label: "已完成",
          value: "2"
        }
      ],

      searchArray: {
        status: "",
        alterType: ""
      },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      loading: false,
      dyHeight: {},
      tableKey: false,
      dialogTitle: '',
      dialogForm: {
        custName: '',
        custId: '',
        alterType: '',
        alterDetail: '',
        status: ''
      },
      visibleFlag: false,
      dialogFormRules: {
        status: [{ required: true, message: "不能为空", trigger: "blur" }],
        custName: [{ required: true, message: "不能为空", trigger: "blur" }],
        custId: [{ required: true, message: "不能为空", trigger: "blur" }],
        alterType: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        alterDetail: [
          { required: true, message: "不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    window.addEventListener("resize", () => {
      this.dyHeight = Number(window.innerHeight) - 330;
    });
    this.dyHeight = Number(window.innerHeight) - 330;
    this.resetFn();
    this.initCardList()
  },
  filters: {
    formatFilter(v, type, list) {
      if (type == "status") {
        let arr = _.filter(list, { value: v });
        return arr.length > 0 ? arr[0].label : '';
      }
    }
  },
  methods: {
    initCardList() {
        warningCardNum({ reportTime: this.reportTime ? dayjs(this.reportTime).format('YYYY-MM-DD') + ' 23:59:59' : '' }).then(res => {
            this.cardInfo = res
        })
    },
    resetFn() {
      this.searchArray = {
        status: "",
        alterType: ""
      };
      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
      };
      warningworkRecordList(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();
    },
    editFn(row) {
      this.dialogTitle = "修改";
      this.dialogForm = row;
      this.visibleFlag = true;
      // this.$nextTick(() => {
      //   this.$refs.dialogFormRef.resetFields();
      // });
    },
    dialogOkfn() {
      this.$refs["dialogFormRef"].validate(valid => {
        if (valid) {
          warningworkRecordSubmit(this.dialogForm).then(response => {
            if (response.code == "200") {
              let msg = "修改成功";
              this.$message.success(msg);
              this.visibleFlag = false;
              this.resetFn();
            } else {
              this.$message.error(response.msg || "操作失败");
            }
          });
        }
      });
    },
    dialogCancelfn() {
      this.visibleFlag = false;
    },
  }
};
</script>

<style lang="scss" scoped>
.pagination_end {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.time-picker {
  margin: 20px 0 0 0px;
}

.box-card {
    height: 100px;
    border-radius: 8px;
    margin-top: 25px;
    margin-left: -30px;
    border: 3px solid #a8c2f5;
}

.box-card1 {
    height: 100px;
    border-radius: 8px;
    margin-top: 25px;
    border: 3px solid #a8c2f5;
}

.my-span-checklist-title {
    font-size: 14px;
    color: #666;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.my-span-checklist-main {
    line-height: 40px;
    font-size: 30px;
    color: #222;
    font-weight: bold;
}
.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>