<template>
  <el-dialog :before-close="dialogClose" class="quilityDialog" title="" :visible.sync="visible">
    <div class="info-header">
      <img src="../../../assets/img/command/head-warn.png"/>
    </div>
    <div class="info-detail">
      <div>
        <div>
          <div>河道名称：</div>
          <div>槽水河槽水河槽水河</div>
        </div>
        <div>
          <div>水质问题：</div>
          <div>河流漂浮物</div>
        </div>
      </div>
      <div>
        <div>
          <div>巡检时间：</div>
          <div>2020-12-01</div>
        </div>
        <div>
          <div>水质标准：</div>
          <div>污水3类</div>
        </div>
      </div>
      <div>
        <div>航拍起点：</div>
        <div>南京市江宁区东吉大道1号</div>
      </div>
      <div>
        <div>光谱照片：</div>
        <viewer>
          <img :src='require("../../../assets/img/login.png")'>
        </viewer>
      </div>
      <div>
        <div>TN光谱：</div>
        <viewer>
          <img :src='require("../../../assets/img/login.png")'>
        </viewer>
      </div>
      <div class="foot-btn">
        <div @click="dialogClose">取消</div>
        <div @click="submit">
          <span v-show="!submitLoading">指派任务</span>
          <i v-show="submitLoading" class="el-icon-loading"></i>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "quilityDialog",
    data(){
      return {
        submitLoading:false
      }
    },
    props: {
      driverId: {
        type: Number,
        default() {
          return 0
        }
      },
      visible: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    watch: {},
    components: {},
    methods: {
      dialogClose() {
        this.$emit('dialogClose')
      },
      submit(){
        this.$emit('dialogClose')
      }
    }
  }
</script>

<style lang="less">
  .quilityDialog {
    .el-dialog {
      background-color: inherit;
      width: 5.6rem;

      .el-dialog__header {
        display: none;
      }


      .el-dialog__body {
        width: 5.6rem;
        padding: 0;
        min-height: 5.68rem;
        background-position: center center;
        background-size: cover;
        background-image: url(../../../assets/img/command/popup.png);

        .info-detail {
          margin-top: 0.147rem;
          padding-left: 0.56rem;
          padding-right: 0.67rem;
          padding-bottom: 0.66rem;

          > div {
            margin-top: 0.113rem;
          }

          > div:first-child, > div:nth-child(2) {
            display: flex;
            line-height: 0.2rem;

            > div {
              width: 50%;
              display: flex;
              justify-content: left;

              > div:first-child {
                font-family: PingFangSC-Regular;
                font-size: 0.14rem;
                color: #989898;
              }

              > div:last-child {
                font-family: PingFangSC-Regular;
                font-size: 0.14rem;
                margin: 0 0.05rem;
                color: #FFFFFF;
                flex: 1;
              }
            }

            > div:last-child {
              justify-content: end;
            }
          }

          > div:nth-child(3) {
            display: flex;
            line-height: 0.2rem;

            > div:first-child {
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              color: #989898;
            }

            > div:last-child {
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              margin: 0 0.05rem;
              color: #FFFFFF;
              flex: 1;
            }
          }

          > div:nth-child(4), > div:nth-child(5) {
            display: flex;

            > div:first-child {
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              color: #989898;
              line-height: 0.2rem;
              flex: 1;
            }

            > div:last-child {
              display: flex;
            }

            img {
              width: 3.58rem;
              height: 1.3rem;
            }
          }
          .foot-btn {
            margin-top: 0.25rem;
            display: flex;
            justify-content: center;
            >div{
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 1.5rem;
              height: 0.4rem;
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              color: #FFFFFF;
              background: rgba(86,244,248,0.70);
            }
            >div:first-child{
              opacity: 0.62;
              background: rgba(86,244,248,0.50);
              margin-right: 0.2rem;
            }
          }
        }

        .info-header {
          display: flex;
          justify-content: space-between;
          padding-left: 0.566rem;
          padding-right: 0.456rem;
          padding-top: 0.345rem;

          > img:first-child {
            width: 0.91rem;
          }
        }

      }
    }
  }
</style>
