<template>
  <div class="my-agency">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="事件名称：">
        <el-select v-model="formInline.eventNameId"
                   placeholder="请选择"
        >
          <el-option
             v-for="(item, index) in basicConfiguration.ticketEventName"
             :key="item.id"
             :label="item.name"
             :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发生位置：">
        <el-input v-model="formInline.keyword" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所属区域：">
        <el-select v-model="formInline.branchFactoryIds"
                   placeholder="请选择"
        >
          <el-option label="全部" value="" />
          <el-option v-for="(item, index) in basicConfiguration.branchFactoryList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="formInline.deviceType">
          <el-option label="全部" value="" />
          <el-option
           v-for="(item, index) in basicConfiguration.deviceList"
           index="item.id"
           :label="item.name"
           :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-date-picker type="daterange"
                        v-model="formInline.createTime"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button  class="default-btn" @click="onSearch">搜索</el-button>
        <el-button type="primary" class="default-btn" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <common-table
      :data="tableData"
      :columns="tableColumns"
      :default-page-size="20"
      @pagination-change="handlePaginationChange"
      :pagination-texts="{
            total: '共',
            sizeChange: '条/页',
            prev: '前一页',
            next: '后一页',
            jumper: '跳至',
          }"
      >
        <template #index="{ $index }">
          {{ getIndex($index) }}
        </template>
        <template #level="{ row }">
          <span class="level" :class="getColor(row.level)">
            {{ row.level }}
          </span>
        </template>
        <template #operation="{ row }">
          <el-button type="primary" link @click="handleDone(row)">
            处理
          </el-button>
          <span class="table-btn">|</span>
          <el-button type="primary" link @click="handleDispatch(row)">
            分派
          </el-button>
          <span class="table-btn">|</span>
          <el-button type="primary" link @click="changeBag(row)">
            更换布袋
          </el-button>
        </template>
      </common-table>
    </div>
    <common-dialog
     :showDialog="assignDialog.show"
     :title="assignDialog.title"
     :btnGroup="assignDialog.btnGroup"
     @handleBtn="closeAssignDialog"
     @close:showDialog="assignDialog.show = false"
    >
      <el-form :inline="true">
        <el-form-item label="分派人:">
          <el-select v-model="handlerPeopleId" filterable placeholder="请选择分派人">
            <el-option
                v-for="(item, i) in handlerPeople"
                :key="i"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addPerson">新增</el-button>
        </el-form-item>
        <el-form-item label="已分派人:">
          <el-tag
              v-for="(ele,eIndex) in personTag"
              :key="ele.name"
              closable
              @close="delPerson(eIndex)"
              :type="ele.type">
            {{ele.name}}
          </el-tag>
        </el-form-item>
      </el-form>
    </common-dialog>
    <common-dialog
     :show-dialog="rejectDialog.show"
     :title="rejectDialog.title"
     :btnGroup="rejectDialog.btnGroup"
     @handleBtn="closeRejectDialog"
     @close:visible="rejectDialog.show = false"
    >
     <el-form>
       <el-form-item label="驳回原因">
         <el-select v-model="rejectType">
           <el-option v-for="(item, i) in reasonList"
                      :key="i"
                      :label="item.description"
                      :value="item.rejectType"
           >
           </el-option>
         </el-select>
       </el-form-item>
       <el-row>
         <el-col :span="21">
           <el-input type="textarea" v-model="rejectReason" :autosize="{ minRows: 2, maxRows: 12 }" placeholder="请输入内容">
           </el-input>
         </el-col>
       </el-row>
     </el-form>
    </common-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount,computed } from 'vue'
import CommonTable from "@/components/commonTable/index.vue";
import commonDialog from "./components/dialog.vue";
import { getDataFun } from '@/request/method.js';
import moment from 'moment';
const formInline = ref({
  eventNameId: '',
  keyword: '',
  warnType: '',
  branchFactoryIds: '',
  deviceType: '',
  createTime: [
    moment(new Date().getTime() - 1000 * 60 * 60 * 24).format('YYYY-MM-DD HH:mm:ss'),
    moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
  ]
});

const workTicketNo = ref('');
const rejectType = ref('');
const reasonList = ref([]);
const rejectReason = ref('');

const rejectDialog = ref({
  title: '驳回申请',
  show: false,
  btnGroup: [
      {
        attrKey: 'save',
        label: '保存'
      },
    {
      attrKey: 'cancel',
      label: '关闭'
    }
  ]
});

const handlerPeopleId = ref('');
const handlerPeople = ref([]);
const assignDialog = ref({
  title: '闭环控制分派',
  show: false,
  width: '50%',
  btnGroup: [
    {
      attrKey: 'save',
      label: '保存'
    },
    {
      attrKey: 'cancel',
      label: '关闭'
    }
  ]
});
const personTag = ref([]);

const addPerson = ()=>{
  const target = handlerPeople.value.find(item => item.id === handlerPeopleId.value);
  personTag.value.push({
    userId: target.id,
    userName: target.name,
    name: target.name,
    type: 'info'
  });
}

const delPerson = (index)=>{

}

const isShow = ref(true);

const getIndex = (index) => {
  return (currentPage.value - 1) * pageSize.value + index + 1;
};

const basicConfiguration = reactive({
  ticketEventName: [],
  eventTypeList: [],
  branchFactoryList: [],
  deviceList: []
});

const workSheetDetail = ref(null);

const getColor = computed(()=>{
     return (level) => {
       if (level == 2) {
         return 'red'
       } else if (level == 1) {
         return 'yellow'
       } else {
         return 'purple'
       }
     }
});

const onSearch = ()=> {

}

const onReset =()=> {

}

const handleDone = (data)=> {

}

const handleView = (data)=>{

}
// 拒绝
const handleReject = (data)=> {
  workTicketNo.value = data.workTicketNo;
  rejectDialog.value.show = true;
}

// 分派
const handleDispatch = async (data)=> {
  assignDialog.value.show = true;
   /*let res = await getDetail(data.workTicketNo);
   personTag.value = [];
   if (res.handleUsers && res.handleUsers.length > 0) {
     res.handleUsers.forEach(item => {
       personTag.value.push({
         type: 'info',
         name: item.userName,
         userId: item.userId,
         userName: item.userName
       });
     });
   }*/
}

const closeAssignDialog = () => {
  assignDialog.value.show = false;
}

const closeRejectDialog = ()=>{
  rejectDialog.value.show = false;
}

const getDetail = (workTicketNo) => {
  return new Promise((resolve,reject) => {
    const url = '/transaction/doc/detail';
    const params = {
      workTicketNo
    }
    getDataFun(url,params).then(res => {
      workSheetDetail.value = res.data;
      resolve(res.data);
    }).catch(err => {
      reject();
    });
  });
}

const changeBag = (data)=>{

}

const tableData = [
  {
    id: 1,
    name: '张三',
    phone: '13888888888',
    email: '<EMAIL>',
    branchFactory: '上海分公司',
    deviceType: '烟感',
    eventTime: '2021-09-09 12:00:00',
    eventStatus: '已处理',
    eventDetail: '设备报警',
    level: 1
  },
  {
    id: 2,
    name: '张三',
    phone: '13888888888',
    email: '<EMAIL>',
    branchFactory: '上海分公司',
    deviceType: '烟感',
    eventTime: '2021-09-09 12:00:00',
    eventStatus: '已处理',
    eventDetail: '设备报警',
    level: 2
  },
  {
    id: 3,
    name: '张三',
    phone: '13888888888',
    email: '<EMAIL>',
    branchFactory: '上海分公司',
    deviceType: '烟感',
    eventTime: '20',
    level: 3
  }
];

const tableColumns = ref([
  {
    prop: 'workTicketNo',
    label: '编号',
    width: '10%'
  },
  {
    prop: 'eventName',
    label: '事件名称',
    width: '10%'
  },
  {
    prop: 'deviceName',
    label: '发生位置',
    width: '10%'
  },
  {
    prop: 'deviceNo',
    label: '设备编码',
    width: '10%'
  },
  {
    prop: 'deviceType',
    label: '设备类型',
    width: '10%'
  },
  {
    prop: 'signalName',
    label: '信号名称',
    width: '10%'
  },
  {
    prop: 'branchFactory', label: '所属区域',width: '10%' },
  { prop: 'warnTypeName', label: '类型',width: '10%' },
  { prop: 'createTime', label: '发生时间',width: '10%' },
  { prop: 'desc', label: '闭环状态',width: '10%' },
  { prop: 'person', label: '处理人',width: '10%' },
  { prop: 'level', label: '级别',width: '5%' },
  {
    prop: "operation",
    label: "操作",
    width: '15%'
  },
]);

const currentPage = ref(1);
const pageSize = ref(20);

const handlePaginationChange = (pagination) => {
  currentPage.value = pagination.currentPage;
  pageSize.value = pagination.pageSize;
  console.log("分页变化", pagination);
};
</script>

<style scoped lang="scss">
.my-agency {
  width: 100%;
  height: calc(100% - 14px);
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  &-bottom {
    flex: 1;
  }
  .level {
    width: 100%;
    color: #fff;
    text-align: center;
  }
  .yellow {
    // color: #faa508;
    position: relative;
    &::before {
      content: ' ';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffb224;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
    }
  }
  .red {
    position: relative;
    &::before {
      content: ' ';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #db001d;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
    }
  }

  .purple {
    position: relative;
    &::before {
      content: ' ';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #aa05fa;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
    }
  }


  .default-btn {
    width: 85px;
  }
  .search-btn {
    width: 85px;
    background: #2182a0;
    border: 1px solid #2182a0;
  }
}
</style>