<style>
  #table_time_selected1 tr {
    border: 1px solid rgb(102, 162, 243)
  }

  .plug-timer-grid th {
    line-height: 25px;
  }
</style>
<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false" class="group-creat">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="选择快手账户"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-select
          @change="deepConversion"
          v-model="accountId"
          showSearch
          showArrow
          allowClear
          placeholder="选择需创建的快手账户"
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="filterOption"
        >
          <a-select-option v-for="userAccount in accountList" :key="userAccount.accountId"
                           :value="userAccount.accountId">{{userAccount.authName}}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        label="选择广告计划模板"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-select
          v-model="campaignTemplateId"
          @change="getUrlType"
          showSearch
          showArrow
          placeholder="请选择广告计划模板"
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="filterOption"
        >
          <a-select-option v-for="campaign in campaignList" :key="campaign.id"
                           :value="campaign.id">{{campaign.campaignName}}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        v-if="showApp"
        label="目标应用"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-select
          v-model="appId"
          showSearch
          allowClear
          placeholder="选择应用目标"
          optionFilterProp="children"
          style="width: 500px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option value="0">请选择目标应用</a-select-option>
          <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.id">{{appModel.appName}}&#12288;&nbsp;&#12288;{{appModel.appType}}&#12288;&#12288;
            {{appModel.appVersion}}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        v-if="showRedirect"
        label="链接地址"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input style="width: 500px" v-model="redirectUrl"></a-input>

      </a-form-item>


      <a-form-item
        v-if="showPlatformOs"
        label="最低版本"
        :colon="false"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="platformOs" @change="changePlatform">
          <a-radio-button :value='0'>不限</a-radio-button>
          <a-radio-button :value='1'>Android系统</a-radio-button>
          <a-radio-button :value='2'>IOS系统</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        v-if="showAndroidOsa"
        label=" "
        :colon="false"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="androidOsv">
          <a-radio value='3'>不限</a-radio>
          <a-radio value='4'>4.x+</a-radio>
          <a-radio value='5'>5.x+</a-radio>
          <a-radio value='6'>6.x+</a-radio>
          <a-radio value='7'>7.x+</a-radio>
          <a-radio value="8">8x+</a-radio>
          <a-radio value="9">9x+</a-radio>
          <a-radio value="10">10x+</a-radio>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        v-if="showIOSOsa"
        label=" "
        :colon="false"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="iosOsv">
          <a-radio value='6'>不限</a-radio>
          <a-radio value='7'>7.x+</a-radio>
          <a-radio value='8'>8.x+</a-radio>
          <a-radio value='9'>9.x+</a-radio>
          <a-radio value='10'>10.x+</a-radio>

        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="请选择目标人群"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-select
          v-model="targetPopulation"
          showSearch
          showArrow
          disabled
          placeholder="请选择目标人群"
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="filterOption"
        >
          <a-select-option value="default">请期待</a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        label="单日预算"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group buttonStyle="solid" @change="showBudgetStatusChange" v-model="campaignBudget">
          <a-radio-button value="UNLIMITED">不限</a-radio-button>
          <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="预算金额"
        v-if="showBudgetDaily"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-model="dayBudget"
          v-decorator="[
                  'confirm_dayBudget',
                  {rules: [{ required: true, message: ' ' },
                  {validator: handleConfirmValue}]}
                ]"
          placeholder="不小于100，不超过100000000，仅支持输入自然数" type="number" style="width: 70%"></a-input>
        元
      </a-form-item>


      <a-form-item
        label="投放方式"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="speed">
          <a-radio-button value='1'>快速投放</a-radio-button>
          <a-radio-button value='2'>平滑投放</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="排期"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group buttonStyle="solid" v-model="schedulingType" @change="showSetDate">
          <a-radio-button value='1'>从今天开始长期投放</a-radio-button>
          <a-radio-button value='2'>设置开始和结束日期</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item label="设置时间"
                   v-if="showTime"
                   :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                   :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-range-picker
          name="buildTime"
          style="width: 100%"
          v-model="time"/>
      </a-form-item>


      <a-form-item
        label="投放时段"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group buttonStyle="solid" v-model="scheduleTimeType" @change="showSetScheduleTime">
          <a-radio-button value='1'>全天</a-radio-button>
          <a-radio-button value='2'>特定时间</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="设置时间段"
        v-if="showScheduleTime"
        v-model="scheduleTime"
        :labelCol="{lg: {span: 7}, sm: {span: 20}}"
        :wrapperCol="{lg: {span: 15}, sm: {span: 16} }">
        <div id="table_time_selected1" class="table_time_selected1" style="width:70%">
        </div>
      </a-form-item>


      <a-form-item
        label="创意展现方式"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="showMode">
          <a-radio-button value='2'>优先</a-radio-button>
          <a-radio-button value='1'>轮播</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="优化目标出价类型"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="bidType" buttonStyle="solid" @change="showBidType">
          <a-radio-button value='2'>CPC</a-radio-button>
          <a-radio-button value='20'>ECPC</a-radio-button>
          <a-radio-button value='6'>OCPC</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="出价"
        v-if="showBid"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-model="bid"
          v-decorator="[
                  'confirm_bid',
                  {rules: [{ required: true, message: ' ' },
                  {validator: handleConfirmBid}]}
                ]"
          placeholder="不低于0.2元，不高于100元" style="width: 70%"></a-input>
        元
      </a-form-item>


      <a-form-item
        label="优化目标"
        v-if="showOcpxActionType"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="ocpxActionType" @change="showBidType">
          <a-radio-button value="2">行为数</a-radio-button>
          <a-radio-button value="180" :disabled="activationDisabled">激活</a-radio-button>
          <a-radio-button value="53" :disabled="isFormDisabled">表单转化</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="OCPC出价"
        v-if="showCpaBid"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-model="cpaBid"
          placeholder="请填写出价金额" style="width: 70%"></a-input>
        元
      </a-form-item>


      <a-form-item
        label="深度转化目标"
        v-if="showDeepConversionType"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-select
          v-model="deepConversionType"
          showSearch
          showArrow
          allowClear
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="filterOption"
        >
          <a-select-option v-for="conversionType in deepConversionTypes"
                           :key="conversionType.deep_conversion_type"
                           :value="conversionType.deep_conversion_type">{{conversionType.desc}}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        label="深度转化目标出价"
        v-if="showDeepConversionBid"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-model="deepConversionBid"
          placeholder="请填写深度转化出价金额" style="width: 70%"></a-input>
        元
      </a-form-item>


      <a-form-item
        label="广告投放位置"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="placementPosition" buttonStyle="solid" @change="changeShowPosition()">
          <a-radio-button value='1' :disabled="true">优选广告位</a-radio-button>
          <a-radio-button value='2'>按场景选择广告位</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="场景广告位"
        v-if="showPosition"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="sceneId">
          <a-radio-button value='2'>信息流广告</a-radio-button>
          <a-radio-button value='3'>视频后贴片广告</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="创意制作方式"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="unitType">
          <a-radio-button value='4'>自定义</a-radio-button>
          <a-radio-button value='2' :disabled="true">程序化创意</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="广告组名称"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input v-model="unitName" placeholder="请填写广告组名称" style="width: 70%"></a-input>
      </a-form-item>


      <a-form-item
        label="迭代次数"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-model="createCount"
          placeholder="不小于0，不高于10，仅支持输入自然数" type="number" style="width: 70%"></a-input>
      </a-form-item>

      <a-form-item
        :wrapperCol="{ span: 20 }"
        style="text-align: center">
        <a-button htmlType="submit" type="primary" :loading="loading">提交</a-button>
        <a-button style="margin-left: 8px">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import {getAction, postAction} from '@/api/manage'
  import moment from "moment"
  import {mapGetters} from 'vuex'
  import jq from 'jquery'

  let dateQuantumRangeConst = '';

  export default {
    name: 'BaseForm',
    data() {
      return {
        accountId: '',// 账号id
        accountList: {},
        campaignTemplateId: '',// 广告计划模板id
        campaignList: {},
        targetPopulation: '',
        campaignBudget: 'UNLIMITED',
        dayBudget: 0,
        showBudgetDaily: false,
        speed: '1', // 1 快速投放 2平滑投放
        schedulingType: '1',// 1 从今天开始长期投放 2 设置开始和结束日期
        showTime: false,
        createCount: 1,
        time: [],
        scheduleTimeType: '1',
        showScheduleTime: false,
        scheduleTime: '',// 投放时间选择值
        showMode: '2', // 1 轮播 2 优选
        bidType: '2',
        showBid: true,
        loading: false,
        bid: 0,// bid_type 为 CPC/eCPC 出价
        ocpxActionType: '2',// 2行为数 180 激活数
        showOcpxActionType: false,
        showCpaBid: false,
        cpaBid: 0,// bid_type 是 OCPC 时该字段必填
        unitName: "_" + moment().format('YYYY-MM-DD_HH:mm'),//广告组名称
        activationDisabled: true,
        isFormDisabled: true,

        placementPosition: '2',
        showPosition: true,
        sceneId: '2',
        deepConversionTypes: [],
        deepConversionType: '',
        showDeepConversionType: false,
        showDeepConversionBid: false,
        deepConversionBid: 0,
        unitType: '4',

        showApp: false,
        showRedirect: false,
        appList: {},
        appId: '',
        redirectUrl: '',
        showPlatformOs: true,
        platformOs: 0,
        showAndroidOsa: false,
        androidOsv: '3',
        showIOSOsa: false,
        iosOsv: '6',


        form: this.$form.createForm(this),
        url:
          {
            insertTemplateUrl: '/kuaishou/create/createGroups',
            userAllocationList: '/ctop/userAllocation/list',
            campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
            getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
            getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
            appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',


          }
      }
    },
    methods: {
      ...mapGetters(["nickname", "avatar", "userInfo"]),


      changePlatform() {
        if (this.platformOs == 0) {
          this.showAndroidOsa = false;
          this.showIOSOsa = false;
        } else if (this.platformOs == 1) {
          this.showAndroidOsa = true;
          this.showIOSOsa = false;
        } else {
          this.showAndroidOsa = false;
          this.showIOSOsa = true;
        }
      },

      getUrlType() {

        let params = {};
        params.id = this.campaignTemplateId;
        getAction(this.url.getCampaignTemplate, params).then((res) => {
          if (res.type == '2') {
            this.appId = res.appId
            let params2 = {};
            params2.loginId = this.userInfo().id;
            params2.pageSize = '1000';
            getAction(this.url.appListUrl, params2).then((res) => {
              if (res.success) {
                this.appList = res.result.records
                console.log(this.appList)
              }
            });

            this.showApp = true
            this.showRedirect = false
            this.showPlatformOs = false
          } else {
            this.showRedirect = true
            this.showApp = false
            this.showPlatformOs = true
            this.redirectUrl = res.url
          }


        });

      },

      changeShowPosition() {
        if (this.placementPosition == 1) {
          this.showPosition = false;
        } else {
          this.showPosition = true;
        }
      },

      deepConversion() {
        if (this.accountId != '') {
          let params = {};
          params.accountId = this.accountId;
          getAction(this.url.getDeepConversionUrl, params).then((res) => {
            if (res.success) {

              console.log(typeof res.result.isActivate)
              if (res.result.isActivate == '1') {
                this.activationDisabled = false;
                this.deepConversionTypes = res.result.deepConversionTypes;
              } else {
                this.activationDisabled = true;
              }
              if (res.result.isFormSubmit == '1') {
                this.isFormDisabled = false;
              } else {
                this.isFormDisabled = true;
              }
            } else {
              this.activationDisabled = true;
              this.isFormDisabled = true;
              this.showDeepConversionType = false;
              this.showDeepConversionBid = false;
            }
          });

        }

      },

      showBidType() {
        if (this.bidType == '6') {
          this.showBid = false;
          this.showOcpxActionType = true;
          this.showCpaBid = true;

          if ((this.ocpxActionType == '180' || this.ocpxActionType == '53') && this.deepConversionTypes.length > 0) {
            this.showDeepConversionType = true;
            this.showDeepConversionBid = true;

          } else {
            this.showDeepConversionType = false;
            this.showDeepConversionBid = false;
          }


        } else {
          this.showBid = true;
          this.showOcpxActionType = false;
          this.showCpaBid = false;
        }
        this.unitName = "_" + moment().format('YYYY-MM-DD HH:mm');

      },
      showSetScheduleTime() {
        if (this.scheduleTimeType == 2) {
          this.showScheduleTime = true;
          jq(function () {
            load_time_table('table_time_selected1', dateQuantumRangeConst);
          });
        } else {
          this.showScheduleTime = false;
        }
      },

      showSetDate() {
        if (this.schedulingType == '2') {
          this.showTime = true;
        } else {
          this.showTime = false;
        }

      },


      handleConfirmValue(rule, value, callback) {
        if (this.dayBudget == '' || this.dayBudget < 100 || this.dayBudget >= 100000000) {
          callback('请输入正确预算金额')
        }
        callback()
      },
      handleConfirmBid(rule, value, callback) {
        if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
          callback('不得低于0.2元，不得高于100元')
        }
        callback()
      },

      handleConfirmCpaBid(rule, value, callback) {
        if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
          callback('金额不得低于1元，不得高于3000元')
        }
        if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
          callback('金额不得低于5元，不得高于3000元')
        }
        callback()
      },

      showBudgetStatusChange() {
        if (this.campaignBudget == 'AS_BUDGET') {
          this.showBudgetDaily = true;
        } else {
          this.showBudgetDaily = false;
          this.dayBudget = '0';
        }
      },


      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true;
            console.log('Received values of form: ', values);
            console.log('预算金额: ', this.dayBudget);
            console.log('投放方式: ', this.speed);

            if (this.schedulingType == '1') {
              console.log('开始投放时间: ', moment().format('YYYY-MM-DD'));
            }
            if (this.schedulingType == '2') {
              console.log('开始投放时间: ', moment(this.time[0]).format('YYYY-MM-DD'));
              console.log('结束投放时间: ', moment(this.time[1]).format('YYYY-MM-DD'));
            }
            if (this.scheduleTimeType == '2') {
              this.scheduleTime = jq("#table_time_selected1_time_num").val();
              console.log('投放时间段: ', this.scheduleTime);
            }
            console.log('出价方式：: ', this.bidType);
            if (this.bidType == '2' || this.bidType == '20') {
              console.log('出价金额，bid：: ', this.bid);
            }
            if (this.bidType == '6') {
              console.log('优化目标：', this.ocpxActionType);
              console.log('出价金额，cpaBid：', this.cpaBid);
            }


            let params = {};
            params.dayBudget = this.dayBudget * 1000;
            params.speed = this.speed;
            if (this.schedulingType == '1') {
              params.beginTime = moment().format('YYYY-MM-DD');
            }
            if (this.schedulingType == '2') {
              params.beginTime = moment(this.time[0]).format('YYYY-MM-DD');
              params.endTime = moment(this.time[1]).format('YYYY-MM-DD');
            }
            if (this.scheduleTimeType == '2') {
              this.scheduleTime = jq("#table_time_selected1_time_num").val();
              params.scheduleTime = this.scheduleTime;
            }
            params.bidType = this.bidType;
            if (this.bidType == '2' || this.bidType == '20') {
              params.bid = this.bid * 1000;
            }
            if (this.bidType == '6') {
              params.ocpxActionType = this.ocpxActionType;
              params.cpaBid = this.cpaBid * 1000;
            }

            params.showModel = this.showMode;
            params.unitName = this.unitName;
            params.loginId = this.userInfo().id;
            params.accountId = this.accountId;
            params.campaignTemplateId = this.campaignTemplateId;
            params.createCount = this.createCount;
            params.sceneId = this.sceneId;
            params.unitType = this.unitType;
            params.deepConversionType = this.deepConversionType;
            params.deepConversionBid = this.deepConversionBid * 1000;


            let redundancyParams = {};

            redundancyParams.appId = this.appId;
            redundancyParams.redirectUrl = this.redirectUrl;
            redundancyParams.platformOs = this.platformOs;
            if (this.platformOs == 1) {
              redundancyParams.androidOsv = this.androidOsv
            } else if (this.platformOs == 2) {
              redundancyParams.iosOsv = this.iosOsv
            }

            params.redundancy = JSON.stringify(redundancyParams);
            console.log(params)
            postAction(this.url.insertTemplateUrl, params).then((res) => {
              console.log(res)
              if (res.success) {
                this.loading = false;
                alert("广告组创建成功");
              } else {
                this.loading = false;
                alert(res.message);
              }
            });
          }
        })
      },
      onChange(value) {
        console.log(value);
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
      handleBlur() {
        console.log('blur');
      },
      handleFocus() {
        console.log('focus');
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      nextStep() {
        setTimeout(function () {
          that.$emit('nextStep')
        }, 1500)
      },
      prevStep() {
        this.$emit('prevStep')
      }
    },
    created: function () {
      let params = {};
      params.pageSize = '1000';
      params.mediaId = '2';
      params.userId = this.userInfo().id;
      getAction(this.url.userAllocationList, params).then((res) => {
        if (res.success) {
          this.accountList = res.result.records
        }
      });

      params = {};
      params.loginId = this.userInfo().id;
      params.pageSize = '1000';
      getAction(this.url.campaignList, params).then((res) => {
        if (res.success) {
          this.campaignList = res.result.records
          console.log("-----" + this.campaignList)
        }
      });
    }
  }


  var box_id;
  var StartTD = null;
  var StartIndex = null;
  var EndTD = null;
  var EndIndex = null;
  var Selected = 'Selected';
  var Start_x = null;
  var Start_y = null;
  //点击中表格的小时值
  var hour;
  //点击选中的星期值
  var week;
  //1为这个格子在此次鼠标拖拽过程中被选中（不执行选中方法），0为没选中过
  var td_state = 0;
  //生成星期数组
  var num = ['一', '二', '三', '四', '五', '六', '日'];
  //生成时间值数组
  var arr_hour = get_hour_arr();


  //按下鼠标左键拖动选中单元格
  function SelectTD(StartIndex, EndIndex, Selected) {

    var MinX = null;
    var MaxX = null;
    var MinY = null;
    var MaxY = null;

    var coordinate = get_coordinate(StartIndex, EndIndex);
    MinX = coordinate[0];
    MaxX = coordinate[1];
    MinY = coordinate[2];
    MaxY = coordinate[3];

    for (var i = MinY; i <= MaxY; i++) {

      for (var j = MinX; j <= MaxX; j++) {

        var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
        var td_class = jq("td", SelectTR).eq(j).attr('class');
        td_state = jq("td", SelectTR).eq(j).attr("td_state");

        //在同一次鼠标按下的过程中，选中过的表格不进行选中或取消操作
        if (!td_state) {
          if (td_class == Selected) {
            jq("td", SelectTR).eq(j).removeClass(Selected);
          } else {
            //筛选掉标明为星期的表格
            jq("td", SelectTR).eq(j).attr("class", Selected);
          }
          jq("td", SelectTR).eq(j).attr("td_state", '1');
        }

      }

    }

    //改变二进制值
    get_time_val();
    //改变日期显示
    convert_date();

  }

  //点击选中或去掉选中整行、整列
  function SelectTD_click(StartIndex, EndIndex, Selected) {

    var MinX = null;
    var MaxX = null;
    var MinY = null;
    var MaxY = null;
    var Selected_true = 0;
    var Selected_false = 0;

    var coordinate = get_coordinate(StartIndex, EndIndex);
    MinX = coordinate[0];
    MaxX = coordinate[1];
    MinY = coordinate[2];
    MaxY = coordinate[3];

    //列出此列当中的表格选中状态
    for (var i = MinY; i <= MaxY; i++) {

      for (var j = MinX; j <= MaxX; j++) {

        var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
        var td_class = jq("td", SelectTR).eq(j).attr('class');

        if (td_class == Selected) {
          //表格里存在已选中的元素
          Selected_true = 1;
        } else {
          //表格里存在未选中的元素
          Selected_false = 1;
        }

      }

    }

    //执行选中或去掉选中方法
    for (var i = MinY; i <= MaxY; i++) {

      for (var j = MinX; j <= MaxX; j++) {

        var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
        var td_class = jq("td", SelectTR).eq(j).attr('class');

        //一列当中存在已选中与未选中的表格处理:整列全部选中
        if (Selected_true == 1 && Selected_false == 1) {
          jq("td", SelectTR).eq(j).attr("class", Selected);
        } else if (Selected_false == 1) {
          //一列当中只存在未选中的表格处理:整列全部选中
          jq("td", SelectTR).eq(j).attr("class", Selected);
        } else {
          //一列当中只存在已选中的表格处理:整列全部去掉选中
          jq("td", SelectTR).eq(j).removeClass(Selected);
        }

      }

    }
    //改变二进制值
    get_time_val();
    //改变日期显示
    convert_date();
  }

  //获取选中范围的开始与结束的坐标
  function get_coordinate(StartIndex, EndIndex) {
    var MinX = null;
    var MaxX = null;
    var MinY = null;
    var MaxY = null;

    if (StartIndex.x < EndIndex.x) {
      MinX = StartIndex.x;
      MaxX = EndIndex.x;
    } else {
      MinX = EndIndex.x;
      MaxX = StartIndex.x;
    }
    if (StartIndex.y < EndIndex.y) {
      MinY = StartIndex.y;
      MaxY = EndIndex.y;
    } else {
      MinY = EndIndex.y;
      MaxY = StartIndex.y;
    }
    return [MinX, MaxX, MinY, MaxY];
  }

  //改变二进制值
  function get_time_val() {
    var time_type = '';
    jq('#' + box_id + ' table tbody').find('td').each(function (k) {
      var Selected_type = jq(this).attr('class');
      var week = jq(this).attr('week');

      if (Selected_type == Selected && !week) {
        time_type += "1";
      } else if (!week) {
        time_type += "0";
      }
    });
    jq('#' + box_id + '_time_num').val(time_type);
    // convert_date();
  }

  //二进制数转换日期
  function convert_date(external_binary) {
    //初始化周数数组
    var time_week_arr = [];
    if (!external_binary) {
      //内部调用，进行选中表格和输出时间操作。
      var binary = jq('#' + box_id + '_time_num').val();
    } else {
      //存在外部参入传入，此函数进行返回时间操作。
      var date_html = '';
      var binary = external_binary;
    }

    for (var y = 0; y < 7; y++) {
      //初始化小时数组
      var time_hour_arr = [];

      for (var x = 0; x < 24; x++) {

        //获取当前点击元素的位置
        if (y == 0) {
          var index = x;
        } else {
          var index = (y * 24) + x;
        }
        //获取td对应的二进制值
        var Selected_val = binary.charAt(index);

        if (Selected_val == 1) {
          //组装保存进数组里
          if (time_hour_arr == []) {
            //表格的第一个位置的值
            time_hour_arr = arr_hour[x];
          } else if (binary.charAt(index - 1) == 1 && binary.charAt(index - 2) == 1) {
            //此位置（包含上一行）的前两个都为选中时

            if (x == 0 && binary.charAt(index + 1) == 0) {
              //选中行里第一个，后一个表格没选中，加逗号
              time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
            } else if (x == 0 && binary.charAt(index + 1) == 1) {
              //选中行里第一个，后一个表格已选中，不加逗号
              time_hour_arr[time_hour_arr.length] = arr_hour[x];
            } else if (x == 1 && binary.charAt(index - 1) == 0) {
              //选中行里第二个，上一个表格没选中，加逗号
              time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
            } else if (x == 1 && binary.charAt(index - 1) == 1) {
              //选中行里第二个，上一个表格已选中，前加-号，后加逗号
              time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
            } else {
              //选中行里除第一、二的表格以外，前一个表格已经选中，此元素前加- 后加逗号
              time_hour_arr[time_hour_arr.length - 1] = '-' + arr_hour[x] + ', ';
            }

          } else if (binary.charAt(index - 1) == 1 && x > 0) {
            //选中的前一个已选中，且此次选中的不是行里第一个，此次选中的元素前加-后加逗号
            time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
          } else if (binary.charAt(index + 1) != 1 || x == 23) {
            //选中的后一个没选中，或者此次选中的是行里最后一个，此次选中的元素加逗号
            time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
          } else {
            //选中的后一已选中，此次选中的元素不加逗号
            time_hour_arr[time_hour_arr.length] = arr_hour[x];
          }
        }
      }

      time_week_arr[y] = time_hour_arr;

    }
// console.info(box_id);
    if (!external_binary) {
      jq('#' + box_id + '_time_seled').html('');
    }
    //再次组装并输出数组
    var time_html = [];
    for (var y = 0; y < 7; y++) {

      for (var x = 0; x < time_week_arr[y].length; x++) {

        if (!time_html[y]) {
          time_html[y] = time_week_arr[y][x];
        } else {
          time_html[y] += time_week_arr[y][x];
        }

      }

      if (time_html[y]) {
        time_html[y] = time_html[y].substring(0, time_html[y].length - 2);

        if (!external_binary) {
          jq('#' + box_id + '_time_seled').append('<div>星期' + num [y] + ' (' + time_html[y] + ')' + '</div>');
        } else {
          date_html += '星期' + num [y] + ' (' + time_html[y] + ')' + ', ';
        }
      }
    }

    if (external_binary) {
      return date_html;
    }
    // console.info(time_html);
  }

  //生成时间值数组
  function get_hour_arr() {
    var arr_hour = [];
    var oDate = new Date("2016/07/01 00:00:00"); //实例一个时间对象；
    var oDate_hour = oDate.getHours();
    var oDate_minute = oDate.getMinutes();
    for (var i = 0; i < 24; i++) {
      if (oDate_minute < 10) {
        var oDate_minute = "0" + oDate_minute;
      }
      if (i >= 1) {
        oDate.setMinutes(oDate.getMinutes() + 60);
        oDate_hour = oDate.getHours();
        oDate_minute = oDate.getMinutes();
        if (oDate_minute < 10) {
          var oDate_minute = "0" + oDate_minute;
        }
      }
      arr_hour[i] = oDate_hour + ':' + oDate_minute;
    }
    return arr_hour;
  }

  //更新操作
  function renewal(id) {
    if (id) {
      box_id = id;
    }
    //解绑鼠标移动监听事件
    jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
    //初始化表格的在此次选中状态
    jq('#' + box_id + ' table tbody tr td').attr("td_state", '');
    //改变二进制值
    get_time_val();
    //改变日期显示
    convert_date();
  }

  //二进制数赋值选中表格
  function binary_selected() {
    var default_time_val = jq('#' + box_id + ' .default_time_val').val();
    if (default_time_val) {
      for (var i = 0; i < 168; i++) {
        var td_selected = default_time_val.charAt(i);
        if (td_selected != 0) {
          jq('#' + box_id + ' table tbody tr td').eq(i).attr('class', 'Selected');
          //更新操作，显示文字形日期
          renewal();
        }

      }
    }
  }


  //实例化程序
  function load_time_table(id, value) {
    //包住table的元素id
    box_id = id;
    var html;
    html = '<input type="hidden" class="default_time_val" value="' + value + '"/>';
    html += '<table cellspacing="0" cellpadding="0" border="0" class="plug-timer-grid"  onselectstart="return false" onselect="document.selection.empty()">';
    html += '<thead>';
    html += '<tr>';
    html += '<th></th>';
    html += '<th colSpan="12">上午</th>';
    html += '<th colSpan="12">下午</th>';
    html += '</tr>';
    html += '<tr class="hour">';
    html += '<th></th>';
    html += '</tr>';
    html += '</thead>';
    html += '<tbody></tbody>';
    html += '</table>';
    html += '<input class="focus" type="hidden" style="opacity: 0;">';
    html += '<div id="' + box_id + '_time_seled" style="line-height: 15px;font-size:10px;"></div>';
    html += '<input type="hidden" id="' + box_id + '_time_num" name="time" caption="每日投放时段" switchname="selectTime"  value="' + value + '">';
    jq('#' + box_id).html('');
    jq('#' + box_id).append(html);
    var html_tbody_td = '';
    var html_thead_td = '';
    //创建表格
    for (var i = 0; i < 7; i++) {
      var week = i + 1;
      html_tbody_td += '<tr>';
      for (var j = 0; j < 25; j++) {
        if (j == 0) {
          html_tbody_td += '<th week="' + week + '">星期' + num[i] + '</th>';
        } else {
          html_tbody_td += '<td>' + '</td>';
        }
      }
      html_tbody_td += '</tr>';
    }

    //创建表格小时栏目
    for (var i = 0; i <= 23; i++) {
      html_thead_td += '<td  hour="' + i + '">' + i + '</td>';
    }
    jq('#' + box_id + ' table thead .hour').append(html_thead_td);
    jq('#' + box_id + ' table tbody').html(html_tbody_td);
    //检查是否有赋有二进制值，如有，将选中相应的表格
    binary_selected();

    //控制器，控制当前在哪个表格进行操作
    jq('.plug-timer-grid').hover(function (e) {
      if (1 != e.which) {    //判断是否为左击
        var id = jq(this).parent().attr('id');
        box_id = id;
      }
    });

    //清除所有选中项
    jq('.clear').click(function () {
      jq(this).parent().find('td').removeClass(Selected);
      var id = jq(this).parent().attr('id');
      renewal(id);
    });

    //点击小时选中或去掉整列处理块
    jq('#' + box_id + ' table thead tr td').click(function () {
      hour = jq(this).attr('hour');
      if (hour >= 0) {
        var rows = jq('#' + box_id + ' table tbody tr').length;
        Start_x = (jq(this).index()) * 2 - 1;
        Start_y = 0;

        StartIndex = {x: Start_x, y: Start_y};

        EndTD = jq(this);
        var x = (jq(this).index()) * 2 - 2;
        var y = rows - 1;    //为了配合for计算公式-1

        EndIndex = {x: x, y: y};
        //改变第一次按下鼠标时候的改变选中状态
        SelectTD_click(StartIndex, EndIndex, Selected);
      }
    });

    //点击星期选中或去掉整行处理块
    jq('#' + box_id + ' table tbody tr th').click(function () {
      var week = jq(this).attr('week');
      if (week >= 0) {
        var line = jq('#' + box_id + ' table tbody tr td').length / jq('#' + box_id + ' table tbody tr').length;

        Start_x = 0;
        Start_y = jq(this).parent().index();

        StartIndex = {x: Start_x, y: Start_y};

        EndTD = jq(this);
        var y = jq(this).parent().index();
        var x = line - 1;     //为了配合for计算公式-1

        EndIndex = {x: x, y: y};

        //改变第一次按下鼠标时候的改变选中状态
        SelectTD_click(StartIndex, EndIndex, Selected);
      }
    });

    //监听鼠标按下事件(鼠标按下左键拖动选中处理块)
    jq('#' + box_id + ' table tbody tr td').unbind("mousedown").bind("mousedown", function () {
      //记录刚开始点击的元素位置
      Start_x = jq(this).index() - 1;
      Start_y = jq(this).parent().index();
      StartIndex = {x: Start_x, y: Start_y};

      EndTD = jq(this);
      var x = jq(this).index() - 1;
      var y = jq(this).parent().index();
      EndIndex = {x: x, y: y};
      //改变第一次按下鼠标时候的改变选中状态
      SelectTD(StartIndex, EndIndex, Selected);

      StartTD = jq(this);

      StartIndex = {x: Start_x, y: Start_y};

      //监听鼠标移动事件，实现改变后续鼠标拖拽时候的表格选中状态
      jq('#' + box_id + ' table tbody tr td').mouseover(function (e) {
        EndTD = jq(this);
        var x = jq(this).index() - 1;
        var y = jq(this).parent().index();
        EndIndex = {x: x, y: y};
        if (1 != e.which) {    //判断是否为左击
          jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
        }
        //去除停留在td上的光标
        jq('#' + box_id + ' .focus').focus();
        SelectTD(StartIndex, EndIndex, Selected);
      });


      //放开鼠标左键时，初始化相关参数和解绑相关监听
      jq('html').unbind("mouseup").bind("mouseup", function () {
        renewal();
      });

    });

  }

  /*外部调用接口*/

  //解绑鼠标松开监听事件
  function unbundle_mouseover() {
    jq('html').unbind("mouseup");
  }

  /*二进制获取转换后的时间*/
  function get_time_html(binary) {
    return convert_date(binary);
  }

  jq(function () {
    load_time_table('table_time_selected1', this.dateQuantumRange);

  });


</script>


<style type="text/css">
  .plug-timer-grid {
    width: 100%;
  }

  .plug-timer-grid td, .plug-timer-grid th {
    border: 1px solid #97B4D1;
    text-align: center; /*cursor:pointer;*/
    font-size: 10px;
    line-height: 10px;
  }

  .Selected {
    background-color: rgb(102, 162, 243);
    opacity: 0.5;
  }

  .plug-timer-grid {
    border-collapse: collapse;
    z-index: 4;
  }

  .plug-timer-grid thead tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }

  .group-creat table td {
    height: 20px;
    max-width: 5px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    transition: background .5s;
    -webkit-transition: background .5s;
  }

  .plug-timer-grid tbody th {
    width: 4%;
  }

  .plug-timer-grid tbody tr td {
    width: 2%;
  }

  /*.clear{*/
  /*  margin:20px 0px 20px 0px;*/
  /*}*/
</style>

