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

.plug-timer-grid th {
  line-height: 25px;
}
.group-creat .ant-form-item-required::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '';
}
.else-label .ant-form-item-label label::after {
  content: '';
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
}
</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 } }"
        v-if="campaignType == '2'"
      >
        <a-select
          v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
          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.appId" :value="appModel.appId">
            {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
              appModel.platform | platform
            }}
          </a-select-option>
        </a-select>
        <a @click="addApplication" style="margin-left:10px">添加应用</a>
        <creat-application ref="application" />
      </a-form-item>
      <a-form-item
        label="转化类型"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == '3'"
      >
        <a-radio-group
          buttonStyle="solid"
          v-decorator="['url_type', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]"
          @change="getPeople"
        >
          <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="campaignType == '3' ? ' ' : '链接'"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType != '2'"
        :class="{ elseLabel: campaignType == '3' }"
      >
        <!-- 请填写以http://或者https://开头的落地页地址，长度不超过1000个字符 -->
        <a-input
          placeholder="请填写链接"
          v-decorator="['url', { rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }] }]"
        />
      </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="people" @change="getPeople">
          <a-radio-button value="2">不限</a-radio-button>
          <a-radio-button value="3">定向人群</a-radio-button>
          <!-- <a-radio-button value="4">付费人群</a-radio-button> -->
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="people == '3'"
        label="定向逻辑"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-radio-group buttonStyle="solid" v-model="targeted" @change="radioChange">
          <a-radio-button value="2">定向</a-radio-button>
          <a-radio-button value="3">排除</a-radio-button>
          <a-radio-button value="4">同时定向排除</a-radio-button>
        </a-radio-group>
        <div
          :style="{
            border: targeted == '4' ? '1px solid #f2f2f2' : '0',
            padding: targeted == '4' ? '20px' : '0'
          }"
        >
          <div style="display:flex;margin-top:15px">
            <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">定向池：</span>
            <a-input
              placeholder="请至少选择一个自定义人群"
              @focus="
                topMiddle = true
                topMiddleNo = false
              "
              v-model="keyValue"
            />
          </div>

          <div
            style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
            :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
            v-if="topMiddle"
          >
            <a-input placeholder="请输入搜索内容" />
            <a-table
              :columns="columns"
              :dataSource="data"
              bordered
              :pagination="false"
              :rowSelection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
                getCheckboxProps: getCheckboxProps
              }"
            >
              <span slot="orientation_name" slot-scope="text, record">{{ text }}({{ record.orientation_id }})</span>
              <span slot="population_type" slot-scope="text">{{ text | population_type }}</span>
              <span slot="create_time" slot-scope="text">{{ text | getDate }}</span>
            </a-table>
            <div style="text-align:right">
              <a-button style="margin-right:5px" @click="topMiddle = false">取消</a-button>
              <a-button type="primary" @click="okSelect">确定</a-button>
            </div>
          </div>
          <div style="display:flex;margin-top:15px">
            <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">排除池:</span>
            <a-input
              placeholder="请至少选择一个自定义人群"
              @focus="
                topMiddleNo = true
                topMiddle = false
              "
              v-model="keyValueNo"
              v-if="targeted == '4'"
            />
          </div>

          <div
            style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
            :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
            v-if="topMiddleNo"
          >
            <a-input placeholder="请输入搜索内容" />
            <a-table
              :columns="columns"
              :dataSource="data"
              bordered
              :pagination="false"
              :rowSelection="{
                selectedRowKeys: selectedRowKeysNo,
                onChange: onSelectChangeNo,
                getCheckboxProps: getCheckboxPropsNo
              }"
            >
              <span slot="orientation_name" slot-scope="text, record">{{ text }}({{ record.orientation_id }})</span>
              <span slot="population_type" slot-scope="text">{{ text | population_type }}</span>
              <span slot="create_time" slot-scope="text">{{ text | getDate }}</span>
            </a-table>
            <div style="text-align:right">
              <a-button style="margin-right:5px" @click="topMiddleNo = false">取消</a-button>
              <a-button type="primary" @click="okSelectNo">确定</a-button>
            </div>
          </div>
        </div>
      </a-form-item>
      <targeted-population ref="population" />
      
      <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" @click="prevStep" v-show="step == 1">上一步</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'

import creatApplication from './stepModule/creatApplication.vue'
import targetedPopulation from './stepModule/targetedPopulation.vue'

let dateQuantumRangeConst = ''
const columns = [
  {
    title: '人群',
    dataIndex: 'orientation_name',
    scopedSlots: { customRender: 'orientation_name' }
  },
  {
    title: '属性',
    dataIndex: 'population_type',
    filters: [
      { text: '上传人群', value: '1' },
      { text: '广告人群', value: '2' },
      { text: '主题专区', value: '3' },
      { text: '逻辑规则', value: '4' },
      { text: '人群扩展', value: '5' },
      { text: '平台定制', value: '6' },
      { text: '定制付费', value: '7' },
      { text: '网红粉丝类别', value: '8' },
      { text: '内容付费行为', value: '9' },
      { text: '移动应用安装', value: '10' },
      { text: '快手使用活跃度', value: '11' },
      { text: '行业分类', value: '12' },
      { text: '商业兴趣', value: '13' },
      { text: '固化标签', value: '14' },
      { text: '行业偏好', value: '15' },
      { text: '第三方标签', value: '16' },
      { text: '产品关键词', value: '17' }
    ],
    onFilter: (value, record) =>
      record.population_type
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    scopedSlots: { customRender: 'population_type' }
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    scopedSlots: { customRender: 'create_time' },
    sorter: (a, b) => a.create_time - b.create_time
  }
]
export default {
  name: 'BaseForm',
  components: {
    creatApplication,
    targetedPopulation
  },
  props: {
    campaignId: {
      type: String,
      default() {
        return null
      }
    }
  },

  data() {
    return {
      form: this.$form.createForm(this),
      step: 0,
      people: '2',
      targeted: '2',
      topMiddle: false,
      topMiddleNo: false,
      keyValue: '',
      keyValueNo: '',
      columns,
      selectedRowKeys: [],
      selectedRowKeysValue: [],
      selectedRowKeysNo: [],
      selectedRowKeysValueNo: [],
      data: [],
      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'
      },
      appList: [],
      appId: '',
      loading: false,
      campaignTemplateId: '',
      campaignType: '2'
    }
  },
  computed: {
    count() {}
  },
  filters: {
    getDate(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + MM + '-' + d
    },
    platform(str) {
      var data = {
        1: 'Android应用下载',
        2: 'Android网页游戏',
        3: 'iOS应用下载',
        4: 'iOS网页游戏'
      }
      return data[str]
    },
    population_type(str) {
      var data = {
        1: '上传人群',
        2: '广告人群',
        3: '主题专区',
        4: '逻辑规则',
        5: '人群扩展',
        6: '平台定制',
        7: '定制付费',
        8: '网红粉丝类别',
        9: '内容付费行为',
        10: '移动应用安装',
        11: '快手使用活跃度',
        12: '行业分类',
        13: '商业兴趣',
        14: '固化标签',
        15: '行业偏好',
        16: '第三方标签',
        17: '产品关键词'
      }
      return data[str]
    }
  },
  methods: {
    handleConfirmValue(rule, value, callback) {
      if (this.campaignType == '3') {
        if (value == '') {
          callback('请填写链接')
        }
      } else if (this.campaignType == '4') {
        if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
          callback()
        } else {
          callback('链接不能为空且开头为http://或https://，并且长度小于10000')
        }
      } else if (this.campaignType == '5') {
        if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
          callback()
        } else {
          callback('链接不能为空且开头为http://或https://，并且长度小于10000')
        }
      }
    },
    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()
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowKeysValue = selectionRows.map(item => {
        return { orientation_id: item.orientation_id, orientation_name: item.orientation_name }
      })
    },
    getCheckboxProps(record) {
      return {
        props: {
          disabled: this.selectedRowKeysValueNo.some(item => item.orientation_id === record.orientation_id)
        }
      }
    },
    onSelectChangeNo(selectedRowKeys, selectionRows) {
      this.selectedRowKeysNo = selectedRowKeys
      this.selectedRowKeysValueNo = selectionRows.map(item => {
        return { orientation_id: item.orientation_id, orientation_name: item.orientation_name }
      })
    },
    getCheckboxPropsNo(record) {
      return {
        props: {
          disabled: this.selectedRowKeysValue.some(item => item.orientation_id === record.orientation_id)
        }
      }
    },
    okSelect() {
      this.keyValue = ''
      this.topMiddle = false
      for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
        this.keyValue += this.selectedRowKeysValue[i].orientation_name + '   '
      }
    },
    okSelectNo() {
      this.keyValueNo = ''
      this.topMiddleNo = false
      for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
        this.keyValueNo += this.selectedRowKeysValueNo[i].orientation_name + '   '
      }
    },
    radioChange() {
      this.selectedRowKeys = []
      this.selectedRowKeysValue = []
      this.selectedRowKeysNo = []
      this.selectedRowKeysValueNo = []
      this.keyValue = ''
      this.keyValueNo = ''
    },

    addApplication() {
      this.$refs.application.showApplication()
    },
    handleSubmit(e) {
      e.preventDefault()

      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    onChange(value) {
      console.log(value)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
      this.$refs.population.getAppList(value)
    },
    handleBlur() {
      console.log('blur')
    },
    handleFocus() {
      console.log('focus')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    nextStep() {
      var that = this

      that.$emit('nextStep', that.list)
    },
    prevStep() {
      this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignId'))
    },
    getAppList() {
      let params = {}
      params.accountId = localStorage.getItem('accountId')
      getAction('/kuaishou/batch/getAppList', params).then(res => {
        console.log(res)
        if (res.success) {
          this.appList = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })
        }
      })
    },
    getPeople(e) {
      console.log(e.target.value)
      if (e.target.value == 3) {
        getAction('/kuaishou/batch/getPopulationList', { accountId: localStorage.getItem('accountId') }).then(res => {
          if (res.success) {
            this.data = res.result
          }
        })
      }
    },
    getCampaignList() {
      var params = {}
      params.accountId = localStorage.getItem('accountId')
      params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignId')
      getAction('/kuaishou/batch/getCampaignList', params).then(res => {
        if (res.success) {
          this.campaignType = res.result.records[0].campaignType
        }
      })
    },
    getData(className) {
      return this.form.getFieldValue(className)
    }
  },
  //   watch
  activated: function() {
    this.$nextTick(() => {
      this.step = localStorage.getItem('step')
      this.getAppList()
      this.getCampaignList()
    })
  }
}

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;
  border: 1px solid #dfe6ec;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
}

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

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

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