<template>
  <el-dialog title="应用配置"
             width="65%"
             :before-close="handleClose"
             :visible.sync="isShowPlay">
    <div style="margin:0px 0px 20px 3%;height: 400px;">
      <el-row style="margin: 20px 0">
        <el-col :span="2">
          <span style="font-size: 14px">所属区域：</span>
        </el-col>
        <el-col :span="5"
                style="font-size: 14px"> {{ treeFullName }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <span style="font-size: 14px">应用类型：</span>
        </el-col>
        <el-col :span="10">
          <el-radio-group v-model="treeLog.appType">
            <el-radio :label="item.value"
                      size="medium"
                      v-for="item in appTypes"
                      :key="item.id">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-table stripe
                size="mini"
                max-height="390"
                :style="{width: '95%',margin:'0 auto'}"
                ref="multipleSelection"
                border
                :data="params"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}">
        <el-table-column type="index"
                         width="50"
                         align="center"
                         label="序号"
                         show-overflow-tooltip></el-table-column>
        <el-table-column min-width="120"
                         sortable
                         prop="code"
                         label="监控点编码"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="180"
                         sortable
                         prop="name"
                         label="监控点名称"
                         show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 @click="info">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import req from '@/request.js'
import videoManger from '@/api/stManager/videoManger.js'
import { TableMixin } from '@/mixins/tableMixin'
export default {
  props: {
    videoVoList: {
      //数据
      typeof: Array,
      default: [],
    },
    isShowPlay: {
      //弹框展示判断
      typeof: Boolean,
      default: false,
    },
    fullName: {
      //应用名称
      typeof: String,
    },

  },
  mixins: [TableMixin],
  data () {
    return {
      params: null, //获取到的数据
      treeLog: {
        //树节点配置弹框关闭
        zoneCode: null,
        appType: '1',
      },
      treeFullName: '', //树的名称
      appTypes: [], //应用分类
      datas: {}
    }
  },
  created () {
    this.getSysDict()
  },
  watch: {
    videoVoList: {
      handler (newVal) {
        if (newVal) {
          this.params = newVal
        }
      },
    },
    fullName: {
      handler (newVal) {
        this.treeFullName = newVal.slice(1)
        console.log(this.treeFullName, newVal)
      },
      deep: true,
    },
  },

  methods: {
    //关闭
    handleClose () {
      this.$emit('closeFormDiao')
    },
    //保存
    info () {
      this.datas.videoVoList = this.params
      this.datas.appType = this.treeLog.appType
      this.$confirm('是否确认保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        videoManger.setApptype(this.datas, res => {
          if (res.state) {
            this.$message({
              type: 'success',
              message: '保存成功'
            });
            this.$emit('refList');
            this.datas.videoVoList = [];
            this.isShowPlay = false;
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //获取字典
    getSysDict () {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.appTypes = response.data.spyyfl //视频应用分类
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
  },
}
</script>

<style scoped>
.el-radio__label {
  font-size: 14px;
}
.el-radio-group {
  vertical-align: sub;
}
</style>