<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="列表" name="1">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="电商渠道:" label-width="90px" prop="channelCode">
            <el-select
              v-model="queryParams.channelCode"
              placeholder="请选择电商渠道"
              clearable
            >
              <el-option
                v-for="dict in channelList"
                :key="dict.channelCode"
                :label="dict.channelName"
                :value="dict.channelCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="品牌:" label-width="90px" prop="brandCode">
            <el-select
              v-model="queryParams.brandCode"
              filterable
              placeholder="请选择品牌"
              clearable
            >
              <el-option
                v-for="dict in brandNameList"
                :key="dict.brandCode"
                :label="dict.brandName"
                :value="dict.brandCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品编码:" label-width="90px" prop="skuNo">
            <!-- <el-select
              v-model="queryParams.skuNo"
              remote
              :remote-method="skuNoFilter"
              filterable
              clearable
              placeholder="请输入商品名称或编码"
            >
              <el-option
                v-for="item in skuOptions"
                :key="item.skuNo"
                :label="item.skuName + '/' + item.skuNo"
                :value="item.skuNo"
              >
              </el-option>
            </el-select> -->
            <LoadMoreSelect @queryParams="(val) => (queryParams.skuNo = val)" />
          </el-form-item>
          <el-form-item label="订单:" label-width="90px" prop="erpOrderNo">
            <el-input
              v-model="queryParams.erpOrderNo"
              placeholder="请输入订单号"
              clearable
            />
          </el-form-item>
          <el-form-item label="责任人:" label-width="90px" prop="postheadUserNameCode">
            <el-input
              v-model="queryParams.headUserName"
              placeholder="请输入责任人账号"
              clearable
            />
          </el-form-item>
          <el-form-item label="预警类型:" label-width="90px" prop="monitorType">
            <el-select v-model="queryParams.monitorType" placeholder="预警类型" clearable>
              <el-option
                v-for="dict in monitorConfigTypeList"
                :key="dict.typeCode"
                :label="dict.typeName"
                :value="dict.typeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="严重程度:" label-width="90px" prop="monitorLevel">
            <el-select
              v-model="queryParams.monitorLevel"
              placeholder="请选择严重程度"
              clearable
            >
              <el-option
                v-for="dict in dict.type.warning_degree"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日期:" label-width="90px" prop="platform">
            <el-date-picker
              v-model="queryParams.dateRange"
              style="width: 240px"
              value-format="yyyyMMdd"
              :picker-options="pickerOptions"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-row :gutter="10" class="mb8" type="flex" justify="end">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery(1)"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery(1)"
                >重置</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain size="mini" @click="showModel('scModel', 2)"
              >运营预警配置</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain size="mini" @click="showModel('scModel', 1)"
              >供应链预警配置</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain size="mini" @click="showModel('typeModel')"
              >预警类型设置</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList(1)"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          :data="postList"
          border
          ref="proTable"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="电商渠道" align="center" prop="channel" />
          <el-table-column
            label="渠道负责人"
            width="110"
            align="center"
            prop="channelHeadUserName"
          />
          <el-table-column label="品牌" width="160" align="center" prop="brandName">
            <template slot-scope="scope">
              <el-tooltip class="item" content="Top center" placement="top">
                <div slot="content" style="width: auto">{{ scope.row.brandName }}</div>
                <div class="table-overflow">{{ scope.row.brandName }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="商品编码" width="120" align="center" prop="skuNo" />
          <el-table-column label="商品名称" align="center" prop="skuName" width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" content="Top center" placement="top">
                <div slot="content" style="width: auto">{{ scope.row.skuName }}</div>
                <div class="table-overflow">{{ scope.row.skuName }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="140" align="center" prop="orderNo" />
          <el-table-column
            label="责任人"
            width="110"
            align="center"
            prop="headUserName"
          />
          <el-table-column
            label="预警类型"
            width="110"
            align="center"
            prop="monitorType"
          />
          <el-table-column label="严重等级" align="center" prop="level" />
          <el-table-column label="预警内容" align="center" prop="content" width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" content="Top center" placement="top">
                <div slot="content" style="width: auto">{{ scope.row.content }}</div>
                <div class="table-overflow">{{ scope.row.content }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            label="预警时间"
            width="160"
            align="center"
            prop="monitorTime"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row, false)"
                v-if="scope.row.status"
                >关闭预警</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row, true)"
                v-else
                >开启预警</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList(1)"
          class="fixed-pagination"
        />
      </el-tab-pane>
      <el-tab-pane label="图表" name="2">
        <el-form
          :model="queryParams2"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="电商渠道:" label-width="90px" prop="channelCodes">
            <el-select
              v-model="queryParams2.channelCodes"
              placeholder="请选择电商渠道"
              multiple
              clearable
            >
              <el-option
                v-for="dict in channelList"
                :key="dict.channelCode"
                :label="dict.channelName"
                :value="dict.channelCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="品牌:" label-width="90px" prop="brandCode">
            <el-select
              v-model="queryParams2.brandCode"
              filterable
              placeholder="品牌"
              clearable
            >
              <el-option
                v-for="dict in brandNameList"
                :key="dict.brandCode"
                :label="dict.brandName"
                :value="dict.brandCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="预警类型:" label-width="90px" prop="monitorType">
            <el-select
              v-model="queryParams2.monitorType"
              placeholder="请选择预警类型"
              clearable
            >
              <el-option
                v-for="dict in monitorConfigTypeList"
                :key="dict.typeCode"
                :label="dict.typeName"
                :value="dict.typeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="预警等级:" label-width="90px" prop="monitorLevel">
            <el-select
              v-model="queryParams2.monitorLevel"
              placeholder="请选择预警等级"
              clearable
            >
              <el-option
                v-for="dict in dict.type.warning_degree"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="统计周期:" label-width="90px" prop="dateRange">
            <el-date-picker
              v-model="queryParams2.dateRange"
              style="width: 240px"
              value-format="yyyyMMdd"
              :picker-options="pickerOptions"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-row :gutter="10" class="mb8" type="flex" justify="end">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery(2)"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery(2)"
                >重置</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>预警统计图表</span>
          </div>
          <div class="charts-box">
            <line-chart :chart-data="lineChartData" :className="'procure-chart'" />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 预警配置 -->
    <el-dialog
      :title="modelType == 'ysetting' ? '运营预警配置' : '供应链预警配置'"
      :visible.sync="scModel"
      width="100%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-row v-show="modelType == 'ysetting'">
        渠道:
        <el-select
          v-model="scChannelCode"
          placeholder="请选择电商渠道"
          @change="scChannelCodeChange"
          clearable
        >
          <el-option
            v-for="dict in channelList"
            :key="dict.channelCode"
            :label="dict.channelName"
            :value="dict.channelCode"
          />
        </el-select>
      </el-row>

      <el-table :data="settingList" style="margin-top: 8px">
        <el-table-column label="预警类型" align="center" prop="typeCode" width="180"
          ><template slot-scope="scope">
            <el-select
              v-model="scope.row.typeCode"
              @change="(value) => typeChange(value, scope.row)"
              placeholder="预警类型"
              clearable
            >
              <el-option
                v-show="modelType == 'ysetting'"
                v-for="dict in monitorConfigTypeConfigLists"
                :key="dict.typeCode"
                :label="dict.typeName"
                :value="dict.typeCode"
              />
              <el-option
                v-show="modelType == ''"
                v-for="dict in gyMonitorConfigTypeConfigLists"
                :key="dict.typeCode"
                :label="dict.typeName"
                :value="dict.typeCode"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="比较对象" align="center" prop="compareObject" width="180"
          ><template slot-scope="scope">
            <el-select v-model="scope.row.compareObject" placeholder="比较对象" clearable>
              <!-- <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              /> -->
              <el-option key="数值" label="数值" value="数值" />
              <el-option key="市场行情价" label="市场行情价" value="市场行情价" />
              <el-option key="采购成本价" label="采购成本价" value="采购成本价" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="报警阈值范围" align="center" prop="postName" width="280"
          ><template slot-scope="scope">
            下限>= <el-input v-model="scope.row.downNum" style="width: 60px" /><template
              v-if="scope.row.compareObject != '数值'"
              >倍</template
            >
            上限 < <el-input v-model="scope.row.upNum" style="width: 60px" /><template
              v-if="scope.row.compareObject != '数值'"
              >倍</template
            >
          </template>
        </el-table-column>
        <el-table-column label="设置说明" align="center" prop="typeRemark" width="180">
          <template slot-scope="scope">
            {{ scope.row.typeRemark }}
          </template>
        </el-table-column>
        <el-table-column label="等级" align="center" prop="status" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.level" placeholder="等级" clearable>
              <el-option
                v-for="dict in dict.type.warning_degree"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="预警通知方式"
          align="center"
          prop="createTime"
          width="180"
        >
          <template slot-scope="scope">
            <el-checkbox-group v-model="scope.row.noticeType">
              <el-checkbox label="飞书"></el-checkbox>
              <el-checkbox label="短信"></el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
        <el-table-column label="预警接收人" align="center" prop="otherUsers" width="210">
          <template slot-scope="scope">
            <el-checkbox-group v-model="scope.row.procureEnable">
              <el-checkbox
                :label="modelType == 'ysetting' ? '渠道负责人和渠道运营' : '采购负责人'"
              ></el-checkbox>
            </el-checkbox-group>
            <div v-for="(item, index) in scope.row.otherUsers" :key="item">
              {{ item }}
              <i
                class="iconChange el-icon-delete"
                @click="deleteValue(scope.row.otherUsers, index)"
              ></i>
            </div>
            <el-button size="mini" type="text" @click="addUser(scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="removeSetting(scope.$index)"
              >删除行</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button type="text" icon="el-icon-plus" @click="addSetting">新增行</el-button>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSettingForm">保 存</el-button>
        <el-button @click="settingCancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 预警类型 -->
    <el-dialog
      title="预警类型设置"
      :visible.sync="typeModel"
      width="1000px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table :data="monitorConfigTypeList" style="margin-top: 8px">
        <el-table-column label="预警类型编码" align="center" prop="postId"
          ><template slot-scope="scope">
            <el-input
              v-model="scope.row.typeCode"
              placeholder="请输入预警类型编码"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="预警类型名称" align="center" prop="postCode"
          ><template slot-scope="scope">
            <el-input
              v-model="scope.row.typeName"
              placeholder="请输入预警类型名称"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="预警业务类型" align="center" prop="postName"
          ><template slot-scope="scope">
            <el-select v-model="scope.row.serviceType" placeholder="等级" clearable>
              <el-option
                v-for="dict in dict.type.warning_biz_type"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="预警类型说明" align="center" prop="postSort" width="200"
          ><template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              type="textarea"
              :rows="2"
              placeholder="请输入预警类型说明(100个汉字以内)"
              max-length="100"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="预警文本模版" align="center" prop="status" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.noticeModel"
              max-length="200"
              type="textarea"
              :rows="2"
              placeholder="请输入预警文本模版(200个汉字),变量使用{变量名}格式，已支持的变量名包括：比较方、电商渠道、销售价、行情价、到手价"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="removeType(scope.$index)"
              >删除行</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button type="text" icon="el-icon-plus" @click="addType">新增行</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTypeForm">保 存</el-button>
        <el-button @click="typeCancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="添加接收人"
      :visible.sync="addModel"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-form
          :model="queryParams3"
          ref="queryForm3"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="账号:" label-width="90px" prop="userName">
            <el-input
              v-model="queryParams3.userName"
              placeholder="请输入账号名称"
              clearable
            />
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getUserList"
            >查询</el-button
          >
        </el-form>
      </el-row>

      <el-table
        :data="addList"
        style="margin-top: 8px"
        @selection-change="handleSelectionChange"
        row-key="userId"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
          align="center"
        />
        <el-table-column label="账号" align="center" prop="userName" />
        <el-table-column label="姓名" align="center" prop="nickName" />
        <el-table-column label="电话" align="center" prop="phonenumber" />
        <!-- <el-table-column label="邮箱" align="center" prop="email" /> -->
      </el-table>
      <pagination
        v-show="total3 > 0"
        :total="total3"
        :page.sync="queryParams3.pageNum"
        :limit.sync="queryParams3.pageSize"
        @pagination="getUserList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addValueSave">保 存</el-button>
        <el-button @click="addCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
import {
  getChannelList,
  getMonitorList,
  monitorUpdate,
  monitorConfigTypeList,
  monitorConfigTypeConfigList,
  monitorPicList,
  monitorConfigList,
  monitorConfigTypeSave,
  monitorConfigSave,
  monitorConfigClear,
} from "@/api/bizMonitor/index";
import { getBrandNameList } from "@/api/procure/index";
import { listUser } from "@/api/system/user";
import LineChart from "../../charts/LineChart";
import { getToday, getValueDaysAgo } from "@/utils/index";
import LoadMoreSelect from "@/components/LoadMoreSelect/index";

export default {
  name: "BizMonitor",
  dicts: ["sys_normal_disable", "warning_type", "warning_degree", "warning_biz_type"],
  components: {
    LineChart,
    LoadMoreSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total3: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        skuNo: "",
        brandCode: "",
        channelCode: "",
        headUserName: "",
        erpOrderNo: "",
        monitorType: "",
        monitorLevel: "",
        startDate: "",
        endDate: "",
        dateRange: [],
      },
      queryParams2: {
        monitorLevel: "",
        monitorType: "",
        brandCode: "",
        dateRange: [],
      },
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        userName: "",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
        postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
        postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
      },
      cities: ["鸿欧", "吉瑞城", "惠友"],
      checkedGroup: ["鸿欧", "吉瑞城", "惠友"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      scModel: false,
      typeModel: false,
      channelList: [],
      brandNameList: [],
      timer: null,
      scChannelCode: "",
      settingList: [
        // {
        //   typeCode: "",
        //   level: "",
        //   upNum: "",
        //   downNum: "",
        //   compareObject: "",
        //   noticeType: [],
        //   otherUsers: [],
        //   procureEnable: [],
        // },
      ],
      monitorConfigTypeList: [
        // {
        //   createBy: "",
        //   createTime: "",
        //   updateBy: "",
        //   updateTime: "",
        //   remark: "",
        //   typeCode: "",
        //   typeName: "",
        //   serviceType: "",
        //   noticeModel: "",
        // },
      ],
      addValue: "",
      addModel: false,
      addList: [],
      addScope: {},
      settingTypeList: [],
      monitorConfigTypeConfigLists: [],
      gyMonitorConfigTypeConfigLists: [],
      modelType: "",
      lineChartData: {
        xData: [],
        sData: [],
      },
      activeName: "1",
    };
  },
  created() {
    this.queryParams.dateRange = [getValueDaysAgo(7), getToday()];
    console.log(this.queryParams);
    this.getChannelList();
    this.getList(1);
    // this.getList(2);
  },
  methods: {
    handleClick() {
      this.getList(this.activeName);
    },
    getChannelList() {
      getChannelList().then((res) => {
        this.channelList = res.data || [];
        this.scChannelCode = res.data[0].channelCode || "";
      });
      getBrandNameList().then((res) => {
        this.brandNameList = res.data || [];
      });
      monitorConfigTypeList().then((res) => {
        this.monitorConfigTypeList = res.data || [];
      });
      monitorConfigTypeConfigList({ monitorType: "运营类预警" }).then((res) => {
        this.monitorConfigTypeConfigLists = res.data;
      });
      monitorConfigTypeConfigList({ monitorType: "供应链类预警" }).then((res) => {
        this.gyMonitorConfigTypeConfigLists = res.data;
      });
    },
    showModel(type, index) {
      this[type] = true;
      if (index) {
        this.settingList = [];
        this.modelType = index == 2 ? "ysetting" : "";
        monitorConfigList({
          channelCode: index == 2 ? this.scChannelCode : "",
          monitorType: index == 2 ? "运营类预警" : "供应链类预警",
        }).then((res) => {
          res.data.forEach((item) => {
            if (
              item.noticeType != "" &&
              item.noticeType != null &&
              item.noticeType != undefined
            ) {
              if (item.noticeType.indexOf(",") > -1) {
                item.noticeType = item.noticeType.split(",");
              } else {
                item.noticeType = [item.noticeType];
              }
            }
            item.procureEnable
              ? (item.procureEnable = ["采购负责人"])
              : (item.procureEnable = [""]);
            this.settingList.push({ ...item });
          });
        });
      } else {
        this.modelType = "";
      }
    },
    addUser(row) {
      this.getUserList();
      this.addModel = true;
      this.addScope = row;
    },
    addValueSave() {
      if (this.ids.length != 0) {
        this.ids.forEach((item) => {
          if (this.addScope.otherUsers.indexOf(item) == -1) {
            this.addScope.otherUsers.push(item);
          }
        });
        this.addModel = false;
        this.ids = [];
      } else {
        this.$modal.msgWarning("请选择人员");
      }
    },
    addCancel() {
      this.addModel = false;
    },
    settingCancel() {
      this.scModel = false;
    },
    typeCancel() {
      this.typeModel = false;
    },
    addSetting() {
      this.settingList.push({
        typeCode: "",
        level: "",
        upNum: "",
        downNum: "",
        compareObject: "",
        noticeType: [],
        otherUsers: [],
        procureEnable: [],
      });
    },
    addType() {
      this.monitorConfigTypeList.push({
        typeCode: "",
        typeName: "",
        serviceType: "",
        noticeModel: "",
        remark: "",
      });
    },
    removeUser(oth, index) {
      oth.splice(index, 1);
    },
    removeType(index) {
      this.$confirm("确定要删除吗？", "提示", { type: "warning" }).then(() => {
        this.monitorConfigTypeList.splice(index, 1);
      });
    },
    removeSetting(index) {
      this.$confirm("确定要删除吗？", "提示", { type: "warning" }).then(() => {
        this.settingList.splice(index, 1);
      });
    },
    deleteValue(row, index) {
      row.splice(index, 1);
    },
    typeChange(value, row) {
      const data = this.monitorConfigTypeList.filter((item) => {
        return item.typeCode == value;
      });
      if (data[0]) {
        row.typeRemark = data[0].remark;
      }
    },
    scChannelCodeChange() {
      this.settingList = [];
      monitorConfigList({
        channelCode: this.scChannelCode,
        monitorType: "运营类预警",
      }).then((res) => {
        res.data.forEach((item) => {
          if (
            item.noticeType != "" &&
            item.noticeType != null &&
            item.noticeType != undefined
          ) {
            if (item.noticeType.indexOf(",") > -1) {
              item.noticeType = item.noticeType.split(",");
            } else {
              item.noticeType = [item.noticeType];
            }
          }
          item.procureEnable
            ? (item.procureEnable = ["采购负责人"])
            : (item.procureEnable = [""]);
          this.settingList.push({ ...item });
        });
      });
    },
    submitTypeForm() {
      // return false;
      for (let i = 0; i < this.monitorConfigTypeList.length; i++) {
        if (
          this.monitorConfigTypeList[i].noticeModel == "" ||
          this.monitorConfigTypeList[i].remark == "" ||
          this.monitorConfigTypeList[i].serviceType == "" ||
          this.monitorConfigTypeList[i].typeCode == "" ||
          this.monitorConfigTypeList[i].typeName == ""
        ) {
          this.$modal.msgWarning("请填写完整表单后在保存");
          return false;
          break;
        }
      }

      monitorConfigTypeSave(this.monitorConfigTypeList).then((res) => {
        if (res.data && res.code == 200) {
          this.$modal.msgSuccess("新增成功");
          this.typeModel = false;
        }
      });
    },
    submitSettingForm() {
      const data = [];
      if (this.settingList.length === 0) {
        const data1 = {};
        data1.configType = "供应链类预警";
        if (this.modelType == "ysetting") {
          data1.channelCode = this.scChannelCode;
          data1.configType = "运营类预警";
        }

        monitorConfigClear(data1).then((res) => {
          if (res.data && res.code == 200) {
            this.$modal.msgSuccess("保存成功");
            this.scModel = false;
          }
        });
      } else {
        for (let i = 0; i < this.settingList.length; i++) {
          data[i] = { ...this.settingList[i] };
          data[i].noticeType = data[i].noticeType.join(",");
          if (data[i].procureEnable.length != 0) {
            data[i].procureEnable = true;
          } else {
            data[i].procureEnable = false;
          }

          if (this.modelType == "ysetting") {
            data[i].channelCode = this.scChannelCode;
          }

          if (
            this.settingList[i].typeCode == "" ||
            this.settingList[i].level == "" ||
            this.settingList[i].upNum == "" ||
            this.settingList[i].downNum == "" ||
            this.settingList[i].compareObject == "" ||
            this.settingList[i].noticeType == "" ||
            this.settingList[i].remark == ""
          ) {
            this.$modal.msgWarning("请填写完整表单后在保存");
            return false;
            break;
          }
        }
        // if(this.modelType == 'ysetting'){}
        monitorConfigSave(data).then((res) => {
          if (res.data && res.code == 200) {
            this.$modal.msgSuccess("保存成功");
            this.scModel = false;
          }
        });
      }
    },
    handleCheckedCitiesChange(value) {
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      this.cities = value;
    },
    getUserList() {
      listUser(this.queryParams3).then((res) => {
        this.addList = res.rows;
        this.total3 = res.total;
      });
    },
    /** 查询岗位列表 */
    getList(type) {
      if (type == 1) {
        this.loading = true;
        if (this.queryParams.dateRange && this.queryParams.dateRange.length != 0) {
          this.queryParams.startDate = this.queryParams.dateRange[0];
          this.queryParams.endDate = this.queryParams.dateRange[1];
        } else {
          this.queryParams.startDate = "";
          this.queryParams.endDate = "";
        }
        getMonitorList(this.queryParams).then((response) => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;

          // this.$nextTick(() => {
          //   const height =
          //     window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 300;
          //   if (height < this.$refs.proTable.$el.offsetHeight) {
          //     this.$refs.proTable.height = height + "px";
          //     this.$refs.proTable.doLayout();
          //   } else if (height == this.$refs.proTable.$el.offsetHeight) {
          //     this.$refs.proTable.height = height + "px";
          //     this.$refs.proTable.doLayout();
          //   }
          // });
        });
      } else {
        const data = { ...this.queryParams2 };
        if (data.dateRange && data.dateRange.length != 0) {
          data.startDate = data.dateRange[0];
          data.endDate = data.dateRange[1];
        } else {
          data.startDate = "";
          data.endDate = "";
        }
        delete data.dateRange;
        this.lineChartData = {
          xData: [],
          sData: [],
        };
        monitorPicList(data).then((res) => {
          if (res.code == 200 && res.data.length != 0) {
            res.data[0].channelList.forEach((item) => {
              this.lineChartData.sData.push({
                name: item,
                data: [],
              });
            });
            res.data.forEach((item, index) => {
              this.lineChartData.xData.push(item.monitorTime);
              for (let i = 0; i < item.numsList.length; i++) {
                this.lineChartData.sData[index].data.push(item.numsList[i]);
              }
            });
          }
        });
      }
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      // this.form = {
      //   postId: undefined,
      //   postCode: undefined,
      //   postName: undefined,
      //   postSort: 0,
      //   status: "0",
      //   remark: undefined,
      // };
      // this.resetForm("queryParams");
    },
    /** 搜索按钮操作 */
    handleQuery(type) {
      this.queryParams.pageNum = 1;
      this.getList(type);
    },
    /** 重置按钮操作 */
    resetQuery(type) {
      console.log(this.queryForm);
      if (type == 1) {
        this.queryParams.dateRange = [];
        (this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          skuNo: "",
          brandCode: "",
          channelCode: "",
          headUserName: "",
          erpOrderNo: "",
          monitorType: "",
          monitorLevel: "",
          startDate: "",
          endDate: "",
        }),
          this.resetForm("queryForm");
      }

      this.handleQuery(type);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => {
        return item.userName;
      });
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加岗位";
    },
    /** 修改按钮操作 */
    handleUpdate(row, type) {
      monitorUpdate({ id: row.id, status: type }).then((response) => {
        if (response.code == 200 && response.data) {
          if (type) {
            this.$modal.msgSuccess("开启成功");
          } else {
            this.$modal.msgSuccess("关闭成功");
          }
          this.getList(1);
        }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.postId != undefined) {
            updatePost(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList(1);
            });
          } else {
            addPost(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList(1);
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.postId || this.ids;
      this.$modal
        .confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？')
        .then(function () {
          return delPost(postIds);
        })
        .then(() => {
          this.getList(1);
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const data = { ...this.queryParams };
      delete data.pageNum;
      delete data.pageSize;
      this.newDownload("monitor/export", data, `业务监控_${new Date().getTime()}.xlsx`);
    },
  },
};
</script>
<style scoped>
.charts-box {
  height: 360px;
}
.iconChange {
  cursor: pointer;
}
.app-container {
  padding-bottom: 100px;
}
</style>
