<template>
  <div>
    <el-dialog :title="isEdit=='add'?$t('button.groupAdd'):$t('button.groupEdit')" width="1200px" :visible.sync="isShow" v-if="isShow" :close-on-click-modal='false' class="dialog_lj" :before-close="closeDialog">
      <el-form :model="addForm" :rules="rules" ref="addForm" :inline="true" label-width="100px">
        <el-form-item :label="$t('table.presetPointName')" prop="name">
          <el-input v-model.trim="addForm.name" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item :label="$t('table.deviceName')" prop="deviceId">
          <el-select v-model="addForm.deviceId" filterable :placeholder="$t('pholder.select')" @change="handleChange" clearable>
            <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.channelNo')" prop="channelNo">
          <el-select v-model="addForm.channelNo" :placeholder="$t('pholder.select')" @change="channelChange">
            <el-option v-for="item in channelList" :key="item.channelNo" :label="item.channelName" :value="item.channelNo"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="20" class="videoBox">
          <videoDialog ref='videoModelRef'></videoDialog>
        </el-col>
        <el-col :span="4" v-if="false">
          <el-row v-if='addForm.channelType==2' style="margin-top: 360px;">
            <el-col :span="8">
              <el-button class="dirBtn dirBtn45" icon="el-icon-caret-left" @mousedown.native='setControl(4)' @mouseup.native='stopControl(4)'></el-button>
            </el-col>
            <el-col :span="8">
              <el-button class="dirBtn" icon="el-icon-caret-top" @mousedown.native='setControl(0)' @mouseup.native='stopControl(0)'></el-button>
            </el-col>
            <el-col :span="8">
              <el-button class="dirBtn dirBtn135" icon="el-icon-caret-left" @mousedown.native='setControl(6)' @mouseup.native='stopControl(6)'></el-button>
            </el-col>
            <el-col :span="8">
              <el-button class="dirBtn" icon="el-icon-caret-left" @mousedown.native='setControl(2)' @mouseup.native='stopControl(2)'></el-button>
            </el-col>
            <el-col :span="8">
              <!-- <el-button class="dirBtn" type="text" icon="el-icon-refresh-right"></el-button> -->
            </el-col>
            <el-col :span="8">
              <el-button class="dirBtn" icon="el-icon-caret-right" @mousedown.native='setControl(3)' @mouseup.native='stopControl(3)'></el-button>
            </el-col>
            <el-col :span="8">
              <el-button class="dirBtn dirBtn315" icon="el-icon-caret-left" @mousedown.native='setControl(5)' @mouseup.native='stopControl(5)'></el-button>
            </el-col>
            <el-col :span="8">
              <el-button class="dirBtn" icon="el-icon-caret-bottom" @mousedown.native='setControl(1)' @mouseup.native='stopControl(1)'></el-button>
            </el-col>
            <el-col :span="8">
              <el-button class="dirBtn dirBtn225" icon="el-icon-caret-left" @mousedown.native='setControl(7)' @mouseup.native='stopControl(7)'></el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">
          {{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import EZUIKit from 'ezuikit-js'
  import videoDialog from '@/views/VideoShopTour/components/yingshiVideo.vue'
  export default {
    components:{
      videoDialog
    },
    data() {
      return {
        isEdit:'add',
        isShow: false,
        deviceList:[],
        channelList:[],
        player:'',
        channelObj:{},
        addForm: {
          accountId: this.$cookie.get('accountId'),
          mallId:'',
          name: '',
          deviceId:'',
          channelNo:'',
          deviceSerial:'',
          platform:''
        },
        rules: {
          name: [{
            required: true,
            message: this.$t('pholder.input'),
            trigger: 'blur'
          }],
          deviceId: [{
            required: true,
            message: this.$t('pholder.select'),
            trigger: 'blur'
          }],
          channelNo: [{
            required: true,
            message: this.$t('pholder.select'),
            trigger: 'blur'
          }],
        },
        dIndex:''
      }
    },
    methods: {
      dialogInit(type,mallId,row) {
        this.isEdit = type;
        this.isShow = true;
        this.addForm = {
          accountId: this.$cookie.get('accountId'),
          mallId:mallId,
          name: '',
          deviceId:'',
          channelNo:'',
          channelId:'',
          deviceSerial:'',
          platform:''
        };
        this.getDeviceList()
        if(row){
          let currObj = Object.assign({},row)
          this.addForm.name = currObj.name;
          this.addForm.id = currObj.id;
          this.addForm.deviceId = currObj.deviceId;
          this.addForm.channelNo = currObj.channelNo;
          this.addForm.deviceSerial = currObj.deviceSerial;
          this.addForm.platform = currObj.platform;
          this.dIndex = currObj.index
          this.handleChange(currObj.deviceId,1,currObj.channelNo)
        }
      },
      setControl(val){
        let parmas = {
          'platform':this.addForm.platform,
          'deviceSerial':this.addForm.deviceSerial,
          'channelNo':this.addForm.channelNo,
          'direction':val,
          'speed':1
        }
        this.$api.videoShopTourReport.ptzStart(parmas).then(data => {
          let result = data.data
          if(result.code !=200){
            this.$message({
              message: result.msg,
              type: 'error'
            });
          }
        })
      },
      stopControl(val){
        let parmas = {
          'platform':this.addForm.platform,
          'deviceSerial':this.addForm.deviceSerial,
          'channelNo':this.addForm.channelNo,
          'direction':val
        }
        this.$api.videoShopTourReport.ptzStop(parmas).then(data => {
          console.log(data)
        })
      },
      getDeviceList() {
        this.deviceList = [];
        this.$api.videoShopTourReport.getDeviceList(
            {
              accountId: this.$cookie.get('accountId'),
              mallId: this.addForm.mallId,
              system: 0,
              pageNum:1,
              pageSize:9999999
            },
            null,
            true
          )
          .then(data => {
            let result = data.data;
            if(result.code == '200'){
              if (result.data.list.length) {
                this.deviceList = result.data.list;
              }
            }
          })
      },
      handleChange(val,value,channelNo){
        this.$forceUpdate()
        if(!value){
          this.addForm.channelNo = ''
          this.addForm.deviceSerial = ''
          this.addForm.platform = ''
        }
        this.channelList = [];
        this.$api.videoShopTourReport.getPatrolDeviceChannelList({ deviceId:val,pageSize: 999999,page:1})
          .then(data => {
            var result = data.data;
            this.channelList = result.data.list;
            if(channelNo){
              this.channelChange(channelNo)
            }
          })
      },
      channelChange(val){
        this.$forceUpdate()
        this.channelList.forEach(item=>{
          if(item.channelNo==val){
            this.addForm.deviceSerial = item.deviceSerial
            this.addForm.platform = item.platform
            this.addForm.channelType = item.channelType
            this.addForm.channelId = item.id
          }
        })
        let parmas = {
          id:this.addForm.channelId,
          protocol:'1'
        }
        this.$api.videoShopTourReport.getLiveAddress(parmas).then(data => {
          let result = data.data;
          if(result.code==200){
            this.$refs.videoModelRef.dialogInit(result.data.liveAddress,result.data.accessToken,this.isEdit,this.addForm,'','',this.dIndex)
          }
        })
      },
      addSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.isEdit=='add'){
              this.$api.videoShopTourReport.addPreset(this.addForm)
                .then((res) => {
                  let result = res.data;
                  if(result.code==200){
                    this.$message({
                      message: result.msg,
                      type: 'success'
                    });
                    this.$parent.getTableData();
                    this.$refs.addForm.resetFields();
                    this.isShow = false
                  }else{
                    this.$message({
                      message: result.msg,
                      type: 'error'
                    });
                  }
                })
            }else{
              this.$api.videoShopTourReport.editPreset(this.addForm)
                .then((res) => {
                  let result = res.data;
                  if(result.code==200){
                    this.$message({
                      message: result.msg,
                      type: 'success'
                    });
                    this.$parent.getTableData();
                    this.$refs.addForm.resetFields();
                    this.isShow = false
                  }else{
                    this.$message({
                      message: result.msg,
                      type: 'error'
                    });
                  }
                })
            }
          } else {
            return false;
          }
        });
      },
      closeDialog() {
        this.$refs.addForm.resetFields();
        this.addForm = {}
        this.isShow = false;
        if(this.player){
          this.player.stop()
        }
      }
    }
  }
</script>
<style lang="less" scoped="scoped">
  .dialog_lj{
    /deep/.el-input__inner{
      height: 30px !important;
    }
    /deep/.el-col-8{
      text-align: center;
      margin-bottom: 10px;
    }
    .dirBtn{
      height: 40px;
      width: 40px;
      color: #000;
      padding: 0;
    }
    .dirBtn45{
      /deep/.el-icon-caret-left{
        transform: rotate(45deg);
      }
    }
    .dirBtn135{
      /deep/.el-icon-caret-left{
        transform: rotate(135deg);
      }
    }
    .dirBtn225{
      /deep/.el-icon-caret-left{
        transform: rotate(225deg);
      }
    }
    .dirBtn315{
      /deep/.el-icon-caret-left{
        transform: rotate(315deg);
      }
    }
    #canvasVideo{
      text-align: center;
    }
    .videoBox{
      position: relative;
    }
    .btns{
      position: absolute;
      right: 15px;
      bottom: 70px;
      .scaleBtn{
        padding: 0;
        width: 20px;
        height: 20px;
        display: block;
        background-color: #fff;
        color: #000;
        margin: 0 0 10px 0;
      }
    }
  }
</style>