<template>
  <el-container>
    <el-aside width="40%">
      <el-container>
        <el-header>
          <div class="left-panel">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
               v-auth="'event_cate.create'"
              @click="add"
            ></el-button>
            <!-- <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button> -->
          </div>
        </el-header>
        <el-main class="nopadding">
          <scTable
            ref="table"
            :apiObj="apiObj"
            row-key="id"
            stripe
            highlightCurrentRow
            @row-click="rowClick"
            :hidePagination="true"
            hideDo
          >
            <el-table-column
              label="#"
              type="index"
              width="50"
              fixed="left"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="name"
              width="120"
               fixed="left"
            ></el-table-column>
            <el-table-column
              label="标识"
              prop="code"
              width="100"
            ></el-table-column>
            <el-table-column label="触发" prop="trigger" width="80">
              <template #default="scope">
                <span v-if="scope.row.trigger == 10">监控</span>
                <span v-if="scope.row.trigger == 20">定位</span>
              </template>
            </el-table-column>
              <el-table-column
              label="优先级"
              prop="priority"
              width="80"
            ></el-table-column>
            <el-table-column label="喇叭开启" prop="speaker_on" width="80">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.speaker_on"
                  :disabled="true"
                ></el-switch>
              </template>
            </el-table-column>
             <el-table-column
              label="喇叭开启区域"
              prop="name"
              width="120"
            >
            
            <template #default="scope">
              <el-space v-if="scope.row.filter_area_level">{{
                filter_area_[scope.row.filter_area_level]
              }}</el-space></template
            >
            
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="right">
              <template #default="scope">
                <el-button
                  type="warning"
                  link
                  size="small"
                    v-auth="'event_cate.update'"
                  @click="table_edit(scope.row)"
                  >通用配置</el-button
                >
              </template>
            </el-table-column>
          </scTable>
        </el-main>
      </el-container>
    </el-aside>
    <el-container>
      <el-header>
        <div class="left-panel">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
             v-auth="'notify_setting.create'"
            @click="add2"
          ></el-button>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable
          ref="table2"
          :apiObj="apiObj2"
          row-key="id"
          stripe
          :hidePagination="true"
          hideDo
        >
          <el-table-column label="#" type="index" fixed="left" width="50"></el-table-column>
           <el-table-column label="事件种类" prop="event_cate_name" fixed="left" width="100">
           
          </el-table-column>
          <el-table-column label="提醒对象" prop="obj_cate" fixed="left" width="100">
            <template #default="scope">
              <el-space v-if="scope.row.obj_cate">{{
                objcate_[scope.row.obj_cate]
              }}</el-space></template
            >
          </el-table-column>
          <el-table-column label="具体对象" fixed="left" prop="post_name" width="100">
            <template #default="scope">
              {{
                scope.row.post_name
              }}
               {{
                scope.row.user_name
              }}
              <el-space v-if="scope.row.variable">{{
                variable_[scope.row.variable]
              }}</el-space></template
            >
          </el-table-column>
          <el-table-column
            label="岗位人员过滤"
            prop="filter_recipient"
            width="150"
            ><template #default="scope">
              <el-space v-if="scope.row.filter_recipient">{{
                filter_recipient_[scope.row.filter_recipient]
              }}</el-space></template
            ></el-table-column
          >
          <el-table-column
            label="区域级别过滤"
            prop="filter_area_level"
            width="100"
            ><template #default="scope">
              <el-space v-if="scope.row.filter_area_level">{{
                filter_area_level_[scope.row.filter_area_level]
              }}</el-space></template
            ></el-table-column
          >
          <el-table-column label="可处理" prop="can_handle" width="80">
            <template #default="scope">
              <el-icon v-if="scope.row.can_handle" color="green"
                ><CircleCheckFilled
              /></el-icon>
              <el-icon v-else color="red"><CircleCloseFilled /></el-icon>
            </template>
          </el-table-column>
          <el-table-column label="短信通知" prop="sms_enable" width="80">
            <template #default="scope">
              <el-icon v-if="scope.row.sms_enable" color="green"
                ><CircleCheckFilled
              /></el-icon>
              <el-icon v-else color="red"><CircleCloseFilled /></el-icon>
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="sort"/>
          <!-- <el-table-column label="微信通知" prop="wechat_enable" width="80">
            <template #default="scope">
              <el-icon v-if="scope.row.wechat_enable" color="green"
                ><CircleCheckFilled
              /></el-icon>
              <el-icon v-else color="red"><CircleCloseFilled /></el-icon>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" fixed="right" align="right">
            <template #default="scope">
              <el-button
                type="danger"
                link
                size="small"
                 v-auth="'notify_setting.delete'"
                @click="table_del(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </el-container>
  <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @closed="dialog.save = false"
  ></save-dialog>
  <save-dialog2
    v-if="dialog2.save"
    ref="saveDialog2"
    @success="handleSaveSuccess2"
    @closed="dialog2.save = false"
  ></save-dialog2>
</template>

<script>
import saveDialog from "./event_cate_form.vue";
import saveDialog2 from "./notify_settings_form.vue";
import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
export default {
  name: "notify_setting",
  components: {
    saveDialog,
    saveDialog2,
    CircleCheckFilled,
    CircleCloseFilled,
  },
  data() {
    return {
      apiObj: this.$API.ecm.event_cate.list,
      apiObj2: null,
      dialog: {
        save: false,
      },
      dialog2: {
        save: false,
      },
      selection: [],
      chosen_cate: null,
      filter_recipient_: {
        10: "当事人部门",
        20: "当事人部门以上",
        30: "属地部门",
        40: "属地部门以上",
      },
      objcate_: { post: "岗位", user: "用户", variable: "变量" },
      variable_: {
        self: "本人",
        area_manager: "区域负责人",
        visit_receptionist: "访客接待人",
      },

      filter_area_level_: {
        10: "低风险",
        20: "一般风险",
        30: "较大风险",
        40: "重大风险",
      },
       filter_area_: 
        { 10: "办公生活区以上",
         20: "生产一般区以上",
        30: "生产重点区以上",
        },
    };
  },
   mounted() {
    //  this.apiObj2 = this.$API.ecm.notify_setting.list;
  },
  methods: {
    rowClick(row) {
      var params = {
        event_cate: row.id,
      };
      this.apiObj2 = this.$API.ecm.notify_setting.list;
      this.chosen_cate = row.id;
      this.$refs.table2.queryData(params);
    },
    //窗口新增
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open();
      });
    },
    //窗口新增
    add2() {
      this.dialog2.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog2.open();
      });
    },
    //窗口编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(row);
      });
    },
    table_del(row, index) {
      this.$API.ecm.notify_setting.delete.req(row.id).then((res) => {
        this.$refs.table2.removeIndex(index);
        this.$message.success("删除成功");
        return res;
      });
    },
    //本地更新数据
    handleSaveSuccess() {
      //为了减少网络请求，直接变更表格内存数据
      // if(mode=='add'){
      // 	this.$refs.table.unshiftRow(data)
      // }else if(mode=='edit'){
      // 	this.$refs.table.updateKey(data)
      // }

      //当然也可以暴力的直接刷新表格
      this.$refs.table.refresh();
      this.dialog.save = false;
    },
    handleSaveSuccess2() {
      this.$refs.table2.refresh();
      this.dialog2.save = false;
    },
  },
};
</script>

<style>
</style>
