<template>
  <div class="flexOne groupts">
    <div class="enrollTotalSearch">
      <ul>
        <li>
          <span>
            <em>{{$t('system.table_company')}}</em>
            <el-select
              class="w200"
              v-model="msg.BranchId"
              filterable
              :placeholder="$t('pub.pleaseSel')"
              @change="linkageDepartment()"
            >
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option
                v-for="item in companyList"
                :label="item.BName"
                :value="item.Id"
                :key="item.Id"
              ></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em class="fl" style="margin-top: 10px!important;">{{$t('fnc.bmxuanze')}}</em>
            <treeselect
              class="w200 fl"
              :options="departmentList"
              v-model="msg.RB_Department_Id"
              :label="$t('pub.unlimitedSel')"
              :normalizer="normalizer"
              @select="linkageEmployeeMsg"
            />
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('fnc.ryxuanze')}}</em>
          </span>
          <el-select
            class="w200"
            v-model="msg.CreateBy"
            filterable
            :placeholder="$t('pub.pleaseSel')"
          >
            <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
            <el-option
              v-for="item in employeeList"
              :label="item.name"
              :value="item.empId"
              :key="item.empId"
            ></el-option>
          </el-select>
        </li>
        <li v-if="false">
          <span>
            <em>审批状态</em>
            <el-select class="w200" v-model="msg.examineStatus">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option label="待我审批" value="0"></el-option>
              <el-option label="我已审批" value="1"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>计划日期</em>
            <el-date-picker
              v-model="msg.timeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :range-separator="$t('OrderList.zhi')"
              :start-placeholder="$t('OrderList.star')"
              :end-placeholder="$t('OrderList.end')"
            ></el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>任务状态</em>
            <el-select class="w200" v-model="msg.status">
              <el-option :label="$t('pub.unlimitedSel')" value="-2"></el-option>
              <el-option label="未开始" value="-1"></el-option>
              <el-option label="进行中" value="0"></el-option>
              <el-option label="超时进行中" value="1"></el-option>
              <el-option label="超时完成" value="2"></el-option>
              <el-option label="正常完成" value="3"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input
            type="button"
            class="hollowFixedBtn"
            :value="$t('pub.searchBtn')"
            @click="getList();resetPageIndex()"
          />
          <button class="normalBtn" @click="exportFile()">导出</button>
        </li>
      </ul>
    </div>
    <div style="margin:10px 0;">
      <span class="circle green"></span>
      <span class="remark">进行中</span>
      <span class="circle red"></span>
      <span class="remark">超时</span>
      <span class="circle black"></span>
      <span class="remark">完成</span>
      <span class="circle"></span>
      <span class="remark">未开始</span>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('hotel.hotel_status')}}</th>
        <th>标签</th>
        <th>{{$t('active.cl_addPp')}}</th>
        <th>部门</th>
        <th width="300">标题</th>
        <th>内容概要</th>
        <th>开始时间</th>
        <th>截止时间</th>
        <th>{{$t('fnc.cjshijian')}}</th>
        <th>总经理立项审批</th>
        <th>主管立项审批</th>
        <th>当前进度</th>
        <th>总经理完成审批</th>
        <th>主管完成审批</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item, index) in DataList" :key="index">
        <td>
          <span class="circle" v-if="item.ExamineStatus==0||item.ExamineStatus==-1"></span>
          <span class="circle green" v-else-if="item.Status==0"></span>
          <span class="circle red" v-else-if="item.Status==1||item.Status==2"></span>
          <span class="circle black" v-else-if="item.Status==3"></span>
        </td>
        <td>
          <el-tag v-if="item.Tags.length>0">{{item.Tags}}</el-tag>
        </td>
        <td>{{item.CreateName}}</td>
        <td>{{item.DepartmentName}}</td>
        <td>{{item.Title}}</td>
        <td width="250">
          <el-tooltip effect="dark" :content="item.Description" placement="top-start">
            <span>{{item.Description.length>23?item.Description.substring(0,23)+"...":item.Description}}</span>
          </el-tooltip>
        </td>
        <td>{{item.BeginTime}}</td>
        <td>{{item.EndTime}}</td>
        <td>{{item.CreateDate}}</td>
        <td>
          <span v-if="item.ZongExamineStatus==0" style="color:grey">审批中</span>
          <span
            v-else-if="item.ZongExamineStatus==1"
            style="color:green;text-decoration: underline;"
          >已通过</span>
          <span v-else style="color:red;text-decoration: underline;">已驳回</span>
        </td>
        <td>
          <span v-if="item.ExamineStatus==0" style="color:grey">审批中</span>
          <span
            v-else-if="item.ExamineStatus==1"
            style="color:green;text-decoration: underline;"
          >已通过</span>
          <span v-else style="color:red;text-decoration: underline;">已驳回</span>
        </td>
        <td>
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="item.Progree"
            status="success"
          ></el-progress>
        </td>
        <td>
          <span v-if="item.Status==2||item.Status==3">
            <span v-if="item.ZongFinishExamineStatus==0" style="color:grey">审批中</span>
            <span
              v-else-if="item.ZongFinishExamineStatus==1"
              style="color:green;text-decoration: underline;"
            >已通过</span>
            <span v-else style="color:red;text-decoration: underline;">已驳回</span>
          </span>
        </td>
        <td>
          <span v-if="item.Status==2||item.Status==3">
            <span v-if="item.FinishExamineStatus==0" style="color:grey">审批中</span>
            <span
              v-else-if="item.FinishExamineStatus==1"
              style="color:green;text-decoration: underline;"
            >已通过</span>
            <span v-else style="color:red;text-decoration: underline;">已驳回</span>
          </span>
        </td>
        <td>
          <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
            <el-button
              style="padding:4px"
              type="info"
              icon="el-icon-search"
              @click.stop="query(item.Id)"
              circle
            ></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper"
      :page-size="msg.pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import updateSalesMan from "../commonPage/updateSalesMan.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import moment from 'moment'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      normalizer(node) {
        var obj = {
          id: node.DepartmentId,
          label: node.DepartmentName
        };
        if (node.ChildList != null && node.ChildList.length > 0) {
          obj.children = node.ChildList;
        }
        return obj;
      },
      msg: {
        BranchId: "-1",
        RB_Department_Id: null,
        pageIndex: 0,
        pageSize: 10,
        CreateBy: "-1",
        examineStatus: "-1",
        timeRange: [],
        status:"-2"
      },
      getCompanyMsg: {
        RB_Group_Id: "0",
        Status: "0"
      },
      getDepartmentMsg: {
        RB_Group_Id: "0",
        RB_Branch_Id: "-1",
        Status: "0"
      },
      employeeMsg: {
        RB_Group_id: "0",
        RB_Branch_id: "-1",
        departmentId: "0",
        IsLeave: "-1"
      },
      departmentList: [],
      companyList: [],
      employeeList: [],
      userInfo: {},
      datas: [],
      currentPage: 1,
      total: 0,
      DataList: [],
      loading: true
    };
  },
  mounted() {
    this.userInfo = this.getLocalStorage();
    this.userId = this.userInfo.EmployeeId;
    this.getCompanyMsg.RB_Group_Id = this.getDepartmentMsg.RB_Group_Id = this.userInfo.RB_Group_id; //集团
    this.getCompany();
    //this.getEmployee();
  },
  methods: {
    exportFile(){
      let msg = this.msg
      msg.EmpId = this.userInfo.EmployeeId
      msg.IsAll = 1
      let fileName =  "【" + moment(new Date()).format("YYYY-MM-DD HH:mm:ss") + "】工作计划.xls";
      this.GetLocalFile("UserWork_GetUserWorkExportList", this.msg, fileName);
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    getList() {
      //获取数据
      this.loading = true;
      if(this.msg.timeRange && this.msg.timeRange.length==2){
          this.msg.bt=this.msg.timeRange[0];
          this.msg.et=this.msg.timeRange[1];
      }else{
          this.msg.bt="";
          this.msg.et="";
      }
      this.apipost(
        "user_post_GetAllPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    getCompany() {
      this.apipost(
        "admin_get_BranchGetList",
        this.getCompanyMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;
            this.getEmployee();
          } else {
          }
          this.getList();
        },
        err => {}
      );
    },
    linkageEmployeeMsg(node, instanceId) {
      this.employeeMsg.departmentId = node.DepartmentId;
      this.msg.CreateBy = "-1";
      this.getEmployee();
    },
    linkageDepartment() {
      //联动部门
      this.msg.RB_Department_Id = null;
      if (this.msg.BranchId != 0) {
        this.getDepartmentMsg.RB_Branch_Id = this.msg.BranchId;
      }
      this.getDepartment();
    },
    getDepartment() {
      this.apipost(
        "admin_Get_GetDepartmentTreeForReceiveQuery",
        this.getDepartmentMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.departmentList = res.data.data;
            if(res.data.data && res.data.data.length>0){
              this.findMyDepartment(res.data.data[0]);
            }
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    findMyDepartment(data){
      if(data.DepartmentId==this.userInfo.RB_Department_Id){
        this.changeDeparent(data)
      }else{
        if (data.ChildList && data.ChildList.length>0) {
          data.ChildList.forEach(x => {
            this.findMyDepartment(x)
          });
        }
      }
    },
    changeDeparent(data){
      let newDt=new Array();
      newDt.push(data)
       this.departmentList = newDt;
    },
    getEmployee() {
      this.apipost(
        "app_get_company_employee",
        this.employeeMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.employeeList = res.data.data;
          }
        },
        err => {}
      );
    },
    query(id){
      this.$router.push({
        name: "workDetails",
        query: {
          "id": id,
          blank: 'y'
        }
      })
    },
    query2(id){
      this.$router.push({
        name: "workDetails",
        query: {
          "id": id,
          examine:"u",
          blank: 'y'
        }
      })
    }
  }
};
</script>

<style scope>
.enrollTotalSearch {
  width: 100%;
  min-height: auto;
  padding: 0 0 20px 0;
}

.enrollTotalSearch::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.enrollTotalSearch li {
  float: left;
  font-size: 12px;
  height: 40px;
  color: #666;
  margin: 20px 10px 10px 0;
}

.enrollTotalSearch li > span {
  display: inline-block;
}

.enrollTotalSearch li span > em {
  display: inline-block;
  min-width: 60px;
  text-align: right;
  font-style: normal;
  margin: 0 12px 0 0;
}

.enrollTotalSearch li:last-child {
  float: right;
  position: fixed;
  top: 36px;
  right: 20px;
  text-align: right;
  z-index: 50;
}
.circle {
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background: grey;
  border-radius: 20px;
  margin-right: 5px;
}
.circle.red {
  background: #fe4433;
}
.circle.green {
  background: green;
}
.circle.black {
  background: black;
}
.remark {
  margin-right: 20px;
  font-size: 12px;
  display: inline-block;
  vertical-align: text-top;
}
.wd100 {
  width: 100% !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>