<template>
  <div class="problem-left">
    <div>
      <img src="../../../assets/img/command/head-problem.png"/>
    </div>
    <div>
      <el-form ref="form" :model="ruleForm" :label-width="formLabelWidth+'px'">
        <el-form-item style="margin-bottom: 0.05rem" label="时间范围:">
          <el-date-picker
            style="width: 100%"
            clearable
            v-model="ruleForm.date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-bottom: 0.05rem" label="所属区域:">
          <driverAreaSelect v-model="ruleForm.driverArea"></driverAreaSelect>
        </el-form-item>
        <el-form-item label="河湖名称:">
          <el-select filterable="" v-model="ruleForm.driverId" placeholder="" clearable>
            <el-option
              v-for="item in ruleForm.driverArea?driverDataList.filter(item=>item.driverArea==ruleForm.driverArea):driverDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态:">
          <el-select v-model="ruleForm.status" placeholder="" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div :loading="searchLoading" @click="search()" class="search-btn">
        <span v-show="!searchLoading">查询</span>
        <i v-show="searchLoading" class="el-icon-loading"></i>
      </div>
    </div>
    <div>
      <div :key="index" v-for="(item,index) in dataList.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
        <img :src="item.imgUrl"/>
        <div>
          <div>
            <div>
              <div :title="item.driverName">{{item.driverName}}</div>
              <div>
                <div :class="item.status==3?'success-child':''"></div>
                <div :class="item.status==3?'success-text':''">{{item.statusText}}</div>
              </div>
            </div>
            <div>{{item.areaName}}</div>
            <div :title="item.questionType">{{item.questionType}}</div>
          </div>
          <div>
            <div v-if="item.status==1" @click="assignment(item)">派遣人员</div>
            <div @click="showProblemDetail(item)">产看详情</div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="dataList.length>4">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        :pager-count="5"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="dataList.length">
      </el-pagination>
    </div>
    <assignmentDialog @successSubmit="visible=false;search()" :id="id" :userList="userList" v-if="visible" @dialogClose="visible=false" :visible="visible"></assignmentDialog>
  </div>
</template>

<script>
  import assignmentDialog from './assignmentDialog'
  import driverAreaSelect from '@/components/driverAreaSelect'
  import {mapGetters} from "vuex";
  import api from '@/api/command/index'

  export default {
    name: "problem-left",
    data() {
      return {
        id:'',
        pageSize:4,
        currentPage:1,
        visible: false,
        searchLoading: false,
        ruleForm: {
          date: '',
          driverArea: '',
          driverId: '',
          status: ''
        },
        dataList: [],
        driverList: [],
        statusList: [
          {value: 1, label: '待指派'},
          {value: 2, label: '处理中'},
          {value: 3, label: '已完成'},
        ],
        formLabelWidth: this.$root.$options.filters.filterPx(0.83, this.fontSize),
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components: {assignmentDialog, driverAreaSelect},
    watch: {
      driverId() {
        let ruleForm=JSON.parse(JSON.stringify(this.ruleForm))
        ruleForm.driverArea = ''
        ruleForm.driverId = this.driverId
        console.log(this.driverDataList.find(item=>item.id== ruleForm.driverId))
        this.ruleForm=Object.assign({},ruleForm)
        console.log(this.ruleForm)
        this.search()
      },
      driverArea(){
        let ruleForm=JSON.parse(JSON.stringify(this.ruleForm))
        ruleForm.driverArea = this.driverArea
        this.ruleForm=Object.assign({},ruleForm)
        this.search()
      }
    },
    props: {
      driverArea:{
        type: Number,
        default() {
          return ''
        }
      },
      driverId: {
        type: Number,
        default() {
          return ''
        }
      },
      driverDataList: {
        type: Array,
        default() {
          return []
        }
      },
      userList: {
        type: Array,
        default() {
          return []
        }
      },
    },
    mounted() {
      this.search()
    },
    methods: {
      handleCurrentChange(val){
        this.currentPage = val
      },
      assignment(row) {
        this.id=''
        this.$emit('fillMarker')
        this.$nextTick(function () {
          this.id=row.id
          this.visible = true
        })
      },
      showProblemDetail(item) {
        this.$emit('showProblemDetail', {id: item.id, driverId: item.driverId})
      },
      search() {
        if (!this.searchLoading) {
          this.dataList = []
          this.searchLoading = true
          // let marker = [
          //   {id: 1, lng: 118.867937, lat: 32.369795, type: 1, dirverId: 27},
          //   {id: 2, lng: 118.571012, lat: 32.055306, type: 2, dirverId: 50},
          //   {id: 3, lng: 118.908507, lat: 32.135114, type: 3, dirverId: 100},
          //   {id: 4, lng: 118.798507, lat: 32.035114, type: 4, dirverId: 125},
          //   {id: 5, lng: 118.798507, lat: 31.835114, type: 1, dirverId: 170},
          //   {id: 6, lng: 119.038507, lat: 31.605114, type: 2, dirverId: 209},
          //   {id: 7, lng: 119.038507, lat: 31.325114, type: 3, dirverId: 216},
          // ]
          this.currentPage=1
          this.$emit('problemClear', this.ruleForm.driverId,this.ruleForm.driverArea)
          let me = this
          let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
          if (ruleForm.date && ruleForm.date.length > 0) {
            ruleForm.startTime = ruleForm.date[0]
            ruleForm.endTime = ruleForm.date[1]
          }
          delete ruleForm.date
          api.getQuestionList(ruleForm).then(res => {
            this.dataList=res.data?res.data:[]
            console.log(this.dataList)
            me.$emit('problemSearch', this.dataList,this.ruleForm.driverArea,this.ruleForm.driverId)
            me.searchLoading = false
          }).catch(e => {
            me.searchLoading = false
          });
        }
      }
    },
  }
</script>

<style lang="less">
  .problem-left {
    position: absolute;
    top: 1.25rem;
    width: 4.27rem;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    padding-left: 0.26rem;
    padding-right: 0.27rem;

    .el-cascader .el-input .el-icon-arrow-down {
      font-size: 0.12rem;
      color: #ffffff;
    }


    > div:first-child {
      margin-top: 0.1rem;
      width: 100%;
      height: 0.47rem;
      display: flex;

      > img {
        width: 1.33rem;
        height: 100%;
      }
    }

    > div:nth-child(2) {
      margin-top: 0.054rem;
      padding: 0.093rem 0.099rem;
      background-color: #171717;

      .search-btn {
        background: rgba(86, 244, 248, 0.40);
        border: 0.01rem solid #4DCBCE;
        height: 0.4rem;
        line-height: 0.4rem;
        font-family: PingFangSC-Medium;
        font-size: 0.15rem;
        color: #FFFFFF;
        text-align: center;
        cursor: pointer;
      }
    }

    > div:nth-child(3) {
      > div {
        margin-top: 0.1rem;
        display: flex;

        > img {
          width: 1.79rem;
          height: 1.088rem;
        }

        > div:last-child {
          flex: 1;
          margin-left: 0.209rem;
          display: flex;
          flex-flow: column;
          justify-content: space-between;

          > div:first-child {
            > div:first-child {
              display: flex;
              justify-content: space-between;
              align-items: center;

              > div:first-child {
                font-family: PingFangSC-Regular;
                font-size: 0.16rem;
                color: #FFFFFF;
                width: 1.4rem;
                line-height: 0.15rem;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                white-space: nowrap;
              }

              > div:last-child {
                display: flex;
                align-items: center;

                > div:first-child {
                  width: 0.04rem;
                  height: 0.04rem;
                  border-radius: 50%;
                  background-color: #ffffff;
                  border: 0.02rem solid #FF0000;
                }

                > div:last-child {
                  font-family: PingFangSC-Regular;
                  font-size: 0.14rem;
                  color: #FF0000;
                  margin-left: 0.02rem;
                }

                .success-child{
                  border: 0.02rem solid #18d27c!important;
                }

                .success-text{
                  color: #18d27c!important;
                }
              }
            }

            > div:nth-child(2) {
              font-family: PingFangSC-Regular;
              font-size: 0.12rem;
              color: #999999;
              margin-top: 0.017rem;
              line-height: 0.17rem;
            }

            > div:last-child {
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              color: #FFFFFF;
              line-height: 0.2rem;
              margin-top: 0.075rem;
              width: 2.3rem;
              overflow: hidden;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          > div:last-child {
            margin-top: 0.1rem;
            display: flex;
            justify-content: space-between;

            > div {
              cursor: pointer;
              width: 0.9rem;
              height: 0.25rem;
              background: rgba(0, 247, 249, 0.10);
              border: 0.01rem solid rgba(0, 247, 249, 0.30);
              border-radius: 0.05rem;
              border-radius: 0.05rem;
              font-family: PingFangSC-Regular;
              font-size: 0.12rem;
              color: #FFFFFF;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }

    > div:last-child {
      text-align: center;
    }

    .el-pagination {
      margin-top: 0.1rem;
      color: #C4C4C4;;
      font-weight: 700;
      font-size: 0.14rem;
    }

    .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
      margin: 0 0.05rem;
      background-color: #26262A;
      color: #96969A;
      min-width: 0.36rem !important;
      border-radius: 0.02rem;
      border: 0.01rem solid #343434;
      font-size: 0.14rem;
    }

    .el-pagination.is-background .btn-next {
      margin: 0 0.05rem;
      background-color: #26262A;
      color: #96969A;
      min-width: 0.36rem;
      border-radius: 0.02rem;
      border: 0.01rem solid #343434;
      font-size: 0.14rem;
    }

    .el-pagination button {
      line-height: 0.36rem;
      height: 0.36rem;
    }

    .el-pager li {
      line-height: 0.36rem;
      height: 0.36rem;
    }

    .el-pager .more::before {
      line-height: 0.36rem;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #4F4F53;
      color: #FFFFFF;
    }

  }

</style>
