<!-- 测报灯控制 -->
<template>
  <div class=''>
    <div class="equipId">设备ID：{{equipId}}</div>
<el-form
					ref="equipContrlRef"
					:model="equipContrlForm"
					label-position="top"
					label-width="150px"
				>
					<el-form-item label="设备开关：" prop="ds">
						<el-select v-model="equipContrlForm.ds">
							<el-option label="开机" :value="1"></el-option>
							<el-option label="关机" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="工作状态:" prop="ws">
						<el-select
							v-model="ws"
							placeholder="请选择工作状态"
							@change="wsChange()"
						>
							<el-option label="待机" :value="0"></el-option>
							<el-option label="工作" :value="1"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="定时模式:" prop="ts">
						<el-select
							v-model="equipContrlForm.ts"
							placeholder="请选择定时模式"
						>
							<el-option label="光控" :value="0"></el-option>
							<el-option label="时控" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="equipContrlForm.ts == 1" label="开始结束时间:">
						<el-col :span="11">
							<el-time-select
								placeholder="起始时间"
								v-model="equipContrlForm.st"
								:picker-options="{
									start: '00:00',
									step: '01:00',
									end: '23:00'
								}"
							></el-time-select>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-time-select
								placeholder="结束时间"
								v-model="equipContrlForm.et"
								:picker-options="{
									start: '00:00',
									step: '01:00',
									end: '23:00'
								}"
							></el-time-select>
						</el-col>
					</el-form-item>
					<el-form-item
						v-if="equipContrlForm.ts != 1"
						label="定时时长(h):"
						prop="tt"
					>
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.tt"
									show-input
									:min="1"
									:max="10"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="落虫时间(min):" prop="collt">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.collt"
									show-input
									:min="1"
									:max="20"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="加热时间(min):" prop="htim">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.htim"
									show-input
									:min="1"
									:max="20"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="加热温度(℃):" prop="hst">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.hst"
									show-input
									:min="75"
									:max="120"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="高温保护阈值(℃):" prop="tph">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.tph"
									show-input
									:min="50"
									:max="70"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="低温保护阈值(℃):" prop="tpl">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.tpl"
									show-input
									:min="1"
									:max="10"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="数据上传间隔(min):" prop="datt">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.datt"
									:step="10"
									show-input
									:min="10"
									:max="60"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<!-- <el-form-item label="图片分辨率:" prop="imgres">
						<el-select
							v-model="equipContrlForm.imgres"
							placeholder="请选择图片分辨率"
						>
							<el-option label="高" :value="0"></el-option>
							<el-option label="中" :value="1"></el-option>
							<el-option label="低" :value="2"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item class="handAddFormBtn">
						<el-button type="blueInfo" size="small" @click="equipControlSubm()"
							>确定</el-button
						>
						<el-button type="grayInfo" size="small" @click="resetForm()" >取消</el-button
						>
					</el-form-item>
				</el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
props: ["equipId", "equipType","d_id"],
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  equipContrlForm: {
    st: '',
    et: '',
    ts: 0,
    tt: null,
    collt: null,
    htim: null,
    hst: null,
    tph: null,
    tpl: null,
    datt: null,
    // imgres: 0,
    ds: 1
  },
  equipContrlForm2: "{}",
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  //设备控制
  EquipControl() {
    this.$axios({
      method: "POST",
      url:
        "/api/api_gateway?method=forecast.send_control.device_control_info",
      data: this.qs.stringify({ d_id:this.d_id, cmd: "paramconf" }),
    }).then((res) => {
      if (res.data.data && Object.keys(res.data.data).length > 0) {
        let data = res.data.data;
        data.st =
          data.st && data.st < 10 ? "0" + data.st + ":00" : data.st + ":00";
        data.et =
          data.et && data.et < 10 ? "0" + data.et + ":00" : data.et + ":00";
        data.clt = Number(data.clt);
        this.equipContrlForm = data;
        this.equipContrlForm2 = JSON.stringify(data);
      }
    });
  },
  equipControlSubm() {
    let obj = this.equipContrlForm;
    obj.st =
      obj.st && obj.st.slice(0, 2).charAt(0) != "0"
        ? obj.st.slice(0, 2)
        : obj.st.slice(1, 2);
    obj.et =
      obj.et && obj.et.slice(0, 2).charAt(0) != "0"
        ? obj.et.slice(0, 2)
        : obj.et.slice(1, 2);
    this.$axios({
      method: "POST",
      url: "/api/api_gateway?method=forecast.send_control.device_control",
      data: this.qs.stringify({
        device_type_id: 2,
        d_id: this.d_id,
        config: JSON.stringify(obj),
      }),
    }).then((res) => {
      if (res.data.message == "") {
        this.$message.success("设备控制修改成功");
      } else {
        his.$message.error("设备控制修改失败");
      }
      this.equipControlDialogVisible = false;
    });
  },
  resetForm() {
    if(this.equipContrlForm2){
      this.equipContrlForm = JSON.parse(this.equipContrlForm2);
    }else{
      this.equipContrlForm={
        st: "",
        et: "",
        ds: "",
        ts: "",
        tt: "",
        dattim: 10,
        clt: 10,
        timctrl: "",
      }
    }
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  this.EquipControl()
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.equipId{
  line-height: 33px;
  text-align: center;
  background: #eee;
}
.handAddFormBtn{
  margin-top: 20px;
  text-align: right;
}
// 时间input框
/deep/.el-date-editor.el-input, 
/deep/.el-date-editor.el-input__inner{
  width: 120px;
}
/deep/.el-slider__input{
  width: 103px;
}
/deep/.el-input-number--small .el-input-number__decrease, /deep/.el-input-number--small .el-input-number__increase{
  width: 26px;
}
/deep/.el-slider__runway.show-input{
  margin-right: 119px;
}
</style>