<template>
  <el-dialog
    class="setChannelDialog"
    title="通道设置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="640px"
    @close="handleclose"
  >
    <div class="zzinfo">装置编号：{{ areaData.cmdid }}</div>
    <div class="channelsetBox">
      <el-form ref="form" :model="channelForm" label-width="80px">
        <el-form-item label="装置编号">
          <el-input v-model="channelForm.zzbh" disabled></el-input>
        </el-form-item>
        <el-form-item label="拍照通道">
          <el-select
            v-model="channelForm.selectChannel"
            placeholder="请选择"
            @change="changeChannel"
          >
            <el-option
              v-for="item in channelList"
              :key="item.channelid"
              :label="
                item.alias !== null && item.alias !== ''
                  ? item.alias
                  : item.channelname
              "
              :value="item.channelid"
            >
              {{
                item.alias !== null && item.alias !== ""
                  ? item.alias
                  : item.channelname
              }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片大小" class="photoSize">
          <el-input v-model="channelForm.resolutionCX"></el-input>
          <el-input v-model="channelForm.resolutionCY"></el-input>
          <!-- <el-select v-model="channelForm.picSize" placeholder="请选择">
            <el-option
              v-for="item in pictureSize"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="压缩率">
          <el-input v-model="channelForm.ysl"></el-input>
          <span class="infoSpan">(0-100的整数)</span>
        </el-form-item>
        <el-form-item label="参数设置">
          <el-checkbox
            label="USB接口"
            v-model="channelForm.usbchecked"
          ></el-checkbox>
          <el-checkbox
            label="自动对焦"
            v-model="channelForm.zzdjchecked"
          ></el-checkbox>
          <el-checkbox
            label="自动曝光"
            v-model="channelForm.zdbgchecked"
          ></el-checkbox>
        </el-form-item>
        <el-form-item label="曝光时间">
          <el-input v-model="channelForm.bgsj"></el-input>
          <span class="infoSpan">(毫秒)</span>
        </el-form-item>
        <el-form-item label="ISO">
          <el-input v-model="channelForm.iso"></el-input>
        </el-form-item>
        <el-form-item label="模式选择">
          <el-checkbox
            label="HDR模式"
            v-model="channelForm.hdrchecked"
          ></el-checkbox>
          <el-checkbox
            label="夜晚模式"
            v-model="channelForm.ywchecked"
          ></el-checkbox>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-select v-model="channelForm.roteval" placeholder="请选择">
            <el-option
              v-for="item in roteOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="AI识别">
          <el-select v-model="channelForm.aival" placeholder="请选择">
            <el-option
              v-for="item in aiOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="左上OSD">
          <el-input v-model="channelForm.ltosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
        <el-form-item label="右上OSD">
          <el-input v-model="channelForm.rtosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
        <el-form-item label="左下OSD">
          <el-input v-model="channelForm.lbosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
        <el-form-item label="右下OSD">
          <el-input v-model="channelForm.rbosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleclose">取 消</el-button>
      <el-button type="primary" @click="handleConfim" :loading="channelLoading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import {
  getChannelListJoggle,
  getTermStatus,
  setTermCamera,
  getTermCameraRequest,
} from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      isShow: false,
      channelLoading: false,
      channelList: [], //通道选项
      channelForm: {
        zzbh: "",
        selectChannel: "",
        resolutionCX: "",
        resolutionCY: "",
        ysl: "",
        usbchecked: "",
        zzdjchecked: "",
        zdbgchecked: "",
        bgsj: "",
        iso: "",
        hdrchecked: "",
        ywchecked: "",
        roteval: "",
        aival: "",
        ltosd: "",
        rtosd: "",
        lbosd: "",
        rbosd: "",
      },
      roteOptions: [
        {
          value: 0,
          label: "无旋转",
        },
        {
          value: 1,
          label: "0°",
        },
        {
          value: 2,
          label: "90°",
        },
        {
          value: 3,
          label: "180°",
        },
        {
          value: 4,
          label: "270°",
        },
      ],
      aiOptions: [
        {
          value: 0,
          label: "0-关闭当前通道AI识别",
        },
        {
          value: 1,
          label: "1-启用但不绘制区域",
        },
        {
          value: 2,
          label: "2-启用并绘制区域",
        },
      ],
      pictureSize: [
        {
          value: 0,
          label: "5376X3024",
        },
        {
          value: 1,
          label: "1920X1080",
        },
        {
          value: 2,
          label: "2048X1536",
        },
      ],
      requestid: "",
    };
  },
  computed: {
    areaData() {
      return this.$store.state.currentData;
    },
  },
  mounted() {
    this.channelForm.zzbh = this.areaData.cmdid;
    this.channelForm.roteval = this.roteOptions[0].value;
    this.channelForm.aival = this.aiOptions[0].value;
    this.channelForm.picSize = this.pictureSize[0].value;
  },
  methods: {
    //获取通道
    getChannelSelect() {
      getChannelListJoggle({ termid: this.areaData.id })
        .then((res) => {
          this.channelList = res.data.list;
          this.channelForm.selectChannel = this.channelList[0].channelid;
          console.log(this.channelList);
          this.changeChannel();
        })
        .catch((err) => {});
    },
    //修改通道
    changeChannel() {
      console.log(this.channelForm.selectChannel);
      if (this.channelForm.selectChannel == 1) {
        // this.channelForm.picSize = this.pictureSize[0].value;
        this.channelForm.resolutionCX = 5376;
        this.channelForm.resolutionCY = 3024;
      } else if (
        this.channelForm.selectChannel == 2 ||
        this.channelForm.selectChannel == 3
      ) {
        //this.channelForm.picSize = this.pictureSize[1].value;
        this.channelForm.resolutionCX = 1920;
        this.channelForm.resolutionCY = 1080;
      } else if (this.channelForm.selectChannel == 4) {
        //this.channelForm.picSize = this.pictureSize[2].value;
        this.channelForm.resolutionCX = 2048;
        this.channelForm.resolutionCY = 1536;
      }
    },
    handleConfim() {
      console.log("点击了确定");
      console.log(this.channelForm);
      this.channelLoading = true;
      // let params = [
      //   {
      //     name: "resolutionCX",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "resolutionCY",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "quality",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "usbCamera",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "autoFocus",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "autoExposure",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "exposureTime",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "sensibility",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "hdrMode",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "nightMode",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "orientation",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "recognization",
      //     type: 0,
      //     value: "",
      //   },
      //   {
      //     name: "osd.leftTop",
      //     type: 1,
      //     value: "",
      //   },
      //   {
      //     name: "osd.rightTop",
      //     type: 1,
      //     value: "",
      //   },
      //   {
      //     name: "osd.rightBottom",
      //     type: 1,
      //     value: "",
      //   },
      //   {
      //     name: "osd.leftBottom",
      //     type: 1,
      //     value: "",
      //   },
      // ];
      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          let params = [
            {
              name: "act",
              value: "cfg",
            },
            {
              name: "udp",
              value: 1,
            },
            {
              name: "pathType",
              value: 1,
            },
            {
              name: "updateType",
              value: 0,
            },
            {
              name: "path",
              value:
                "data/channels/" + this.channelForm.selectChannel + ".json",
            },
            {
              name: "configs",
              value: 16,
            },
            // {
            //   name: "resolutionCX",
            //   type: 0,
            //   value: this.channelForm.resolutionCX,
            // },
            { name: "name1", value: "resolutionCX" },
            { name: "value1", value: this.channelForm.resolutionCX },
            { name: "type1", value: 0 },
            // {
            //   name: "resolutionCY",
            //   type: 0,
            //   value: this.channelForm.resolutionCY,
            // },
            { name: "name2", value: "resolutionCY" },
            { name: "value2", value: this.channelForm.resolutionCY },
            { name: "type2", value: 0 },
            // {
            //   name: "quality",
            //   type: 0,
            //   value: this.channelForm.ysl,
            // },
            { name: "name3", value: "quality" },
            { name: "value3", value: this.channelForm.ysl },
            { name: "type3", value: 0 },
            // {
            //   name: "usbCamera",
            //   type: 0,
            //   value: this.channelForm.usbchecked ? 1 : 0,
            // },
            { name: "name4", value: "usbCamera" },
            { name: "value4", value: this.channelForm.usbchecked ? 1 : 0 },
            { name: "type4", value: 0 },
            // {
            //   name: "autoFocus",
            //   type: 0,
            //   value: this.channelForm.zzdjchecked ? 1 : 0,
            // },
            { name: "name5", value: "autoFocus" },
            { name: "value5", value: this.channelForm.zzdjchecked ? 1 : 0 },
            { name: "type5", value: 0 },
            // {
            //   name: "autoExposure",
            //   type: 0,
            //   value: this.channelForm.zdbgchecked ? 1 : 0,
            // },
            { name: "name6", value: "autoExposure" },
            { name: "value6", value: this.channelForm.zdbgchecked ? 1 : 0 },
            { name: "type6", value: 0 },
            // {
            //   name: "exposureTime",
            //   type: 0,
            //   value: this.channelForm.bgsj,
            // },
            { name: "name7", value: "exposureTime" },
            { name: "value7", value: this.channelForm.bgsj },
            { name: "type7", value: 0 },
            // {
            //   name: "sensibility",
            //   type: 0,
            //   value: this.channelForm.iso,
            // },
            { name: "name8", value: "sensibility" },
            { name: "value8", value: this.channelForm.iso },
            { name: "type8", value: 0 },
            // {
            //   name: "hdrMode",
            //   type: 0,
            //   value: this.channelForm.hdrchecked ? 1 : 0,
            // },
            { name: "name9", value: "hdrMode" },
            { name: "value9", value: this.channelForm.hdrchecked ? 1 : 0 },
            { name: "type9", value: 0 },
            // {
            //   name: "nightMode",
            //   type: 0,
            //   value: this.channelForm.ywchecked ? 1 : 0,
            // },
            { name: "name10", value: "nightMode" },
            { name: "value10", value: this.channelForm.ywchecked ? 1 : 0 },
            { name: "type10", value: 0 },
            // {
            //   name: "orientation",
            //   type: 0,
            //   value: this.channelForm.roteval,
            // },
            { name: "name11", value: "orientation" },
            { name: "value11", value: this.channelForm.roteval },
            { name: "type11", value: 0 },
            // {
            //   name: "recognization",
            //   type: 0,
            //   value: this.channelForm.aival,
            // },
            { name: "name12", value: "recognization" },
            { name: "value12", value: this.channelForm.aival },
            { name: "type12", value: 0 },
            // {
            //   name: "osd.leftTop",
            //   type: 1,
            //   value: this.channelForm.ltosd,
            // },
            { name: "name13", value: "osd.leftTop" },
            { name: "value13", value: this.channelForm.ltosd },
            { name: "type13", value: 1 },
            // {
            //   name: "osd.rightTop",
            //   type: 1,
            //   value: this.channelForm.rtosd,
            // },
            { name: "name14", value: "osd.rightTop" },
            { name: "value14", value: this.channelForm.rtosd },
            { name: "type14", value: 1 },
            // {
            //   name: "osd.rightBottom",
            //   type: 1,
            //   value: this.channelForm.lbosd,
            // },
            { name: "name15", value: "osd.rightBottom" },
            { name: "value15", value: this.channelForm.lbosd },
            { name: "type15", value: 1 },
            // {
            //   name: "osd.leftBottom",
            //   type: 1,
            //   value: this.channelForm.rbosd,
            // },
            { name: "name16", value: "osd.leftBottom" },
            { name: "value16", value: this.channelForm.rbosd },
            { name: "type16", value: 1 },
          ];
          console.log(params);
          this.setTermFn(params);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    setTermFn(val) {
      setTermCamera({
        termId: this.areaData.id,
        list: val,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;
          this.getTakechannelStatus();
        })
        .catch((err) => {});
    },
    getTakechannelStatus() {
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          console.log(res);
          if (res.data.success == 1) {
            this.isShow = false;
            this.channelLoading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "通道设置成功",
              type: "success",
            });
          } else {
            this.isShow = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "通道设置失败",
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
      this.getChannelSelect();
      console.log(this.areaData);
    },
    handleclose() {
      this.isShow = false;
    },
  },
};
</script>
<style lang="less">
.setChannelDialog {
  .zzinfo {
    position: absolute;
    top: 22px;
    left: 120px;
  }
  .el-dialog__body {
    padding-bottom: 0px;
    .el-form-item--small.el-form-item {
      margin-bottom: 12px;
    }
    .channelsetBox {
      width: 100%;
      // height: 400px;
      //background: #fcc;
      .el-input {
        width: 300px;
      }
    }
    .infoSpan {
      margin-left: 8px;
    }
    .photoSize {
      .el-form-item__content {
        display: flex;
        //justify-content: space-between;
        .el-input {
          width: 144px;
          margin-right: 12px;
        }
      }
    }
  }
  .dialog-footer {
    .el-button--default,
    .el-button--primary {
      width: 80px !important;
      margin-bottom: 0px !important;
    }
    .el-button + .el-button {
      margin-left: 10px !important;
    }
  }
}
</style>
