<template>
  <div v-loading="searchLoading" class="ask-left">
    <div>
      <img src="../../../assets/img/command/head-ask.png"/>
      <div @click="addClick">
        <img src="../../../assets/img/command/ask-add.png">
        <div>新建任务</div>
      </div>
    </div>
    <div>
      <div :class="activeType==2?'check-type':''" @click="activeTypeClick(2)">
        <div>
          <div></div>
          <div>正在执行</div>
        </div>
        <div>{{inExecution}}</div>
        <div v-show="activeType==2"></div>
      </div>
      <div :class="activeType==1?'check-type':''" @click="activeTypeClick(1)">
        <div>
          <div></div>
          <div>已完成</div>
        </div>
        <div>{{finished}}</div>
        <div v-show="activeType==1"></div>
      </div>
    </div>
    <div>
      <el-select @change="search" filterable v-model="ruleForm.driverId" placeholder="请选择河流" clearable>
            <el-option
              v-for="item in driverDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
      </el-select>
    </div>
    <div>
      <div :key="index" v-for="(item,index) in dataList.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
        <div>
          <div>
            <div>{{item.driverName}}</div>
            <div>{{item.areaName}}</div>
          </div>
          <div>{{item.inspectTime}}</div>
        </div>
        <div>{{item.startPoint}}-{{item.endPoint}}</div>
        <div>
          <div>
            <div :class="activeType==1?'isCheck':''"></div>
            <div>{{item.statusText}}</div>
          </div>
          <div>
            <img @click="routesClick(item.driverId)" src="../../../assets/img/command/ask-routes.png"/>
            <img @click="videoClick(item.liveUrl)" v-if="activeType==2" src="../../../assets/img/command/ask-video.png"/>
            <img @click="hpClick(item)" v-if="activeType==1" src="../../../assets/img/command/ask-hp.png"/>
          </div>
        </div>
      </div>
    </div>
    <div v-show="dataList.length>4" style="text-align: center">
      <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>
    <videoDialog :liveUrl="liveUrl" @dialogClose="visible=false" v-if="visible" :visible="visible" ></videoDialog>
    <addDialog :driverDataList="driverDataList" @successSubmit="successSubmit" @dialogClose="addVisible=false" v-if="addVisible" :visible="addVisible" ></addDialog>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import videoDialog from './videoDialog'
  import addDialog from './addDialog'
  import api from '@/api/command/index'

  export default {
    name: "ask-left",
    data() {
      return {
         pageSize:4,
        currentPage:1,
        inExecution:'-',
        finished:'-',
        liveUrl:'',
        searchLoading: false,
        addVisible:false,
        searchValue: '',
        activeType:2,
        visible: false,
        dataList: [],
        ruleForm:{
          driverId:''
        }
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components: {videoDialog,addDialog},
    watch: {
      driverId() {
        if(this.ruleForm.driverId!= this.driverId){
          this.ruleForm.driverId= this.driverId
          this.search()
        }
      }
    },
    props: {
      driverId: {
        type: String,
        default() {
          return ''
        }
      },
      driverDataList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    mounted() {
      this.getAskCount()
      this.search()
    },
    methods: {
      handleCurrentChange(val){
        this.currentPage = val
      },
      getAskCount(){
        api.getAskCount().then(res => {
          const {inExecution,finished}=res.data
          this.inExecution=inExecution?inExecution:''
          this.finished=finished?finished:''
        }).catch(err => {
          this.inExecution=''
          this.finished=''
        });
      },
      activeTypeClick(activeType) {
        this.activeType = activeType
        this.searchValue = ''
        this.$emit('askClear')
        this.search()
      },
      showProblemDetail(item) {
        this.$emit('showProblemDetail', {id: 1, driverId: 27})
      },
      routesClick(driverId){
        this.$emit('routesClick',driverId )
      },
      videoClick(liveUrl){
        this.$emit('askClear')
        if(liveUrl){
          this.liveUrl=liveUrl
          this.visible=true
        }else{
          this.$notify.error({
            title: '错误',
            message: '请配置直播地址'
          });
        }
      },
      hpClick(item){
        this.$emit('hpDetail',item)
      },
      addClick(){
        this.$emit('askClear')
        this.addVisible=true
      },
      successSubmit(){
        this.addVisible=false
        this.search()

      },
      search() {
        this.$emit('askClear',this.ruleForm.driverId)
        let me = this
        this.dataList=[]
        this.searchLoading = true
         api.getAskList({type:this.activeType,driverId:this.ruleForm.driverId}).then(res => {
            this.dataList=res.data?res.data:[]
            me.searchLoading = false
          }).catch(e => {
            me.searchLoading = false
            this.dataList=[]
          });
      }
    },
  }
</script>

<style lang="less">
  .ask-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;


    > div:first-child {
      margin-top: 0.1rem;
      width: 100%;
      height: 0.47rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

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

      > div:last-child {
        display: flex;
        align-items: center;
        cursor: pointer;
        > img {
          width: 0.2rem;
          height: 0.2rem;
        }

        > div {
          font-family: PingFangSC-Regular;
          font-size: 0.16rem;
          color: #FFFFFF;
          line-height: 0.22rem;
          margin-left: 0.152rem;
        }
      }
    }

    > div:nth-child(2) {
      margin-top: 0.075rem;
      display: flex;
      justify-content: space-between;

      > div {
        opacity: 0.83;
        width: 2rem;
        position: relative;
        background: rgba(86, 244, 248, 0.10);
        font-family: PingFangSC-Medium;
        color: #FFFFFF;
        border-radius: 0.02rem;
        cursor: pointer;
        position: relative;

        > div:first-child {
          margin-left: 0.21rem;
          margin-top: 0.04rem;
          display: flex;
          align-items: center;

          > div:first-child {
            width: 0.08rem;
            height: 0.08rem;
            background: #0DFE9E;
            border: 0.04rem solid #0a583e;
            border-radius: 50%;
          }

          > div:last-child {
            margin-left: 0.13rem;
            font-size: 0.16rem;
            line-height: 0.22rem;
          }
        }

        > div:nth-child(2) {
          text-align: center;
          font-size: 0.41rem;
          line-height: 0.57rem;
          margin-top: 0.093rem;
          margin-bottom: 0.065em;
        }

        > div:last-child {
          position: absolute;
          width: 100%;
          bottom: 0rem;
          height: 0.065rem;
          background: #276D70;
        }
      }

      > div:last-child {
        > div:first-child {
          > div:first-child {
            background: #FF0056;
            border: 0.04rem solid #53102C;
          }
        }
      }

      .check-type {
        opacity: 1 !important;
      }
    }

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

      .el-input__inner {
        border: none;
        background-color: #3D3D3D;
        color: #FFFFFF;
        font-family: PingFangSC-Regular;
        font-size: 0.16rem;
        height: 0.36rem;
        line-height: 0.36rem;
        opacity: 1;
      }
    }

    > div:nth-child(4) {
      >div{
        margin-top: 0.24rem;
        font-family: PingFangSC-Regular;
        color: #FFFFFF;
        font-size: 0.14rem;
        >div:first-child{
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 0.25rem;
          >div:first-child{
            display: flex;
            align-items: center;
            >div:first-child{
              font-family: PingFangSC-Medium;
              font-size: 0.18rem;
              margin-right: 0.135rem;
            }
          }
        }
        >div:nth-child(2){
          width: 100%;
          line-height: 0.2rem;
          margin-top: 0.1rem;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          white-space: nowrap;
        }
        >div:last-child{
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 0.3rem;
          margin-top: 0.133rem;
          >div:first-child{
            display: flex;
            align-items: center;
            >div:first-child{
              width: 0.077rem;
              height: 0.077rem;
              border-radius: 50%;
              background: rgba(102,102,102,0.34);
              border: 0.02rem solid #0DFE9E;
              margin-right: 0.07rem;
            }
            .isCheck{
              border: 0.02rem solid #FF0056!important;
            }
          }
          >div:last-child{
            display: flex;
            >img{
              width: 1.2rem;
              height: 0.3rem;
            }
            >img:last-child{
              margin-left: 0.3rem;
            }
          }
        }
      }
    }

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

    .el-pagination {
      margin-top: 0.33rem;
      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>
