<template>
  <div>
    <el-row>
      <el-form ref="playPlanRef" :model="playPlanForm" label-width="70px">
        <el-col :span="24">
          <el-form-item label="播放计划信息" label-width="110px"></el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="播出时间">
            <el-time-picker
              value-format="HH:mm:ss"
              v-model="playPlanForm.BroadcastTime"
              type="date"
              placeholder="请选择开始时间"
            ></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="播放日期">
            <el-checkbox-group v-model="playPlanForm.week">
              <el-checkbox label="周一" name="type" value="1"></el-checkbox>
              <el-checkbox label="周二" name="type" value="2"></el-checkbox>
              <el-checkbox label="周三" name="type" value="3"></el-checkbox>
              <el-checkbox label="周四" name="type" value="4"></el-checkbox>
              <el-checkbox label="周五" name="type" value="5"></el-checkbox>
              <el-checkbox label="周六" name="type" value="6"></el-checkbox>
              <el-checkbox label="周日" name="type" value="7"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select clearable v-model="playPlanForm.state" 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-col>
        <el-col :span="8">
          <el-form-item label="计划时间">
            <el-date-picker
              v-model="playPlanForm.startDate"
              :picker-options="pickerOptions"
              class="filter-item"
              type="daterange"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="广告名称">
            <el-select clearable v-model="playPlanForm.advertisementName" placeholder="请选择广告名称">
              <el-option
                v-for="item in advertisementList"
                :key="item.F_ValueId"
                :label="item.F_Value"
                :value="item.F_ValueId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播出时长">
            <el-input v-model="playPlanForm.broadcost" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入播出时长"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播出次数">
            <el-input v-model="playPlanForm.playNumber" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入播出次数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播放说明">
            <el-input v-model="playPlanForm.explain" placeholder="请输入播放说明"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" style="margin-left:50%" @click="submit">保存</el-button>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { getDictionaryValueList } from "@/api/commonAPI";
import { pickerOptions } from "@/utils";
import { saveChange} from '@/api/mediaCenter/mediaInformation'
export default {
  props: {
    rowid: {
      type: String,
      default: ""
    },
    layerid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      playPlanForm: {
        startDate: '', //计划时间
        BroadcastTime: "", //当天播出时间
        state: "", //状态
        broadcost: "", //播出时长
        playNumber: "", //播放次数
        explain: "", //播放说明
        advertisementName: "", //广告名称
        advertisementNameId: "", //广告名称id
        week: [] //选中天数
      },
      advertisementList: [], //广告名称
      pickerOptions //日期数据
    };
  },
  created() {
    this.getAdvertisement(); //获取广告名称
  },
  methods: {
    //获取广告名称
    getAdvertisement() {
      return new Promise(resolve => {
        const params = {
          isleaf: true,
          code: "MTGGMC"
        };
        getDictionaryValueList(params).then(response => {
          if (response.state.toLowerCase() === "success") {
            this.advertisementList = response.data.Rows;
          }
        });
      });
    },
    submit(){
      return new Promise(resolve=>{
        const params={
          id:this.rowid,
          F_Type:0,
          F_StartTime:this.playPlanForm.startDate && this.playPlanForm.startDate[0],//开始时间
          F_EndTime:this.playPlanForm.startDate[1] && this.playPlanForm.startDate[1],//开始时间
          F_BroadcastTime:this.playPlanForm.BroadcastTime,//播放时间
          F_PlayDate:this.playPlanForm.week.toString(),//播放时间
          F_Name:this.playPlanForm.advertisementName,//广告名称
          F_BroadcastDuration:this.playPlanForm.broadcost-0,//播出时长
          F_PlayCount:this.playPlanForm.playNumber-0,//播放次数
          F_State:this.playPlanForm.state,//状态
          F_Describe:this.playPlanForm.explain,//播放说明
        }
        saveChange(params).then(response=>{
          if(response.state.toLowerCase()=='success'){
            this.$message.success('添加计划成功')
            this.$parent.$layer.close(this.layerid)
            this.$parent.getList()
          }
        })
      })
    },
  }
};
</script>
<style lang="scss" scoped>
</style>