<template>
  <div class="bf-competencypop">
    <el-dialog title="" :visible.sync="dialogVisiblestart" :modal-append-to-body="false" :lock-scroll="false" :before-close="handleClose" :width="isWidth">
      <div class="competencypop_header">
        <div class="left">
          <p>权限规则</p>
        </div>
        <div class="right">
          <el-radio v-model="form.Action" disabled :label="item.id" v-for='(item,index) in option' :key="index">{{item.label}}</el-radio>
        </div>
      </div>
      <div class="juris_list">
        <p>时效范围起</p>
        <el-date-picker v-model="form.ValidBegin" disabled type="datetime" :picker-options="pickerOptionsStart" placeholder="选择时间">
        </el-date-picker>
      </div>
      <div class="juris_list">
        <p>至</p>
        <el-date-picker v-model="form.ValidEnd" disabled @change="setTime" :picker-options="pickerOptionsEnd" type="datetime" placeholder="选择时间">
        </el-date-picker>
      </div>
      <div class="juris_list">
        <p>许可查询行</p>
        <el-input v-model="form.QueryRow" placeholder="请输入内容" disabled></el-input>
      </div>
      <div class="juris_list">
        <p>许可查询列</p>
        <el-input v-model="form.QueryCol" placeholder="请输入内容" disabled></el-input>
      </div>
      <div class="juris_list">
        <p>许可删除行</p>
        <el-input v-model="form.DeleteRow" placeholder="请输入内容" disabled></el-input>
      </div>
      <div class="juris_list">
        <p>许可新增列</p>
        <el-input v-model="form.NewCol" placeholder="请输入内容" disabled></el-input>
      </div>
      <div class="juris_list">
        <p>许可编辑行</p>
        <el-input v-model="form.EditRow" placeholder="请输入内容" disabled></el-input>
      </div>
      <div class="juris_list" style="margin-bottom:0">
        <p>许可编辑列</p>
        <el-input v-model="form.EditCol" placeholder="请输入内容" disabled></el-input>
      </div>
      <div class="footer">
        <Bfbutton :butName='butName1' class="but" @click.native="handleClose" :type='16' />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Bfbutton from '../../components/bfbutton/index.vue'
export default {
  props: {
    dialogVisiblestart: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endWeeks) {
            return time.getTime() >= new Date(this.form.endWeeks).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.form.firstWeeks) {
            return time.getTime() <= new Date(this.form.firstWeeks).getTime() - 86400000
          }
        }
      },
      //   form: {
      //     endWeeks: '',
      //     firstWeeks: '',
      //     value1: '',
      //     value2: '',
      //     input1: '',
      //     input2: '',
      //     input3: '',
      //     input4: '',
      //     input5: '',
      //     input6: '',
      //   },
      butName1: '确定',
      isWidth: '29.1%',
      radio: 1,
      option: [{
        label: '显示权限',
        id: 1
      },
      {
        label: '显示及编辑权限',
        id: 2
      }],
      value1: '',
      value2: ''
    }
  },
  components: {
    Bfbutton
  },
  methods: {
    handleClose () {
      this.$emit('handleClose', this.form)
    },
    setTime (val) {
      if (this.form.endWeeks < this.form.firstWeeks) {
        this.endWeeks = ''
      }
    }
  }
}
</script>
<style lang="scss">
.bf-competencypop {
  .el-dialog {
    border-radius: 20px;
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
  .el-picker-panel {
    > .el-picker-panel__footer {
      > .el-button--text {
        display: none;
      }
    }
  }
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
    background: #ffffff;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 0 48px 0 48px;
    > .competencypop_header {
      width: 100%;
      height: 120px;
      display: flex;
      > .left {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        > p {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #303133;
        }
      }
      > .right {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        > .but {
          width: 180px;
          height: 32px;
        }
      }
    }
    > .juris_list {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      > p {
        width: 75px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 16px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #303133;
      }
      .el-input__inner {
        width: 375px;
        height: 32px;
        background: #f9fbff;
        border-radius: 6px;
      }
      .el-input__icon {
        display: flex;
        align-items: center;
      }
      .el-input {
        width: 375px;
        height: 32px;
        background: #f9fbff;
        border-radius: 6px;
        > .el-input__inner {
          width: 100%;
          height: 100%;
          background: #f9fbff;
          border-radius: 6px;
        }
      }
      > .el-textarea {
        width: 524px;
        height: 64px;
        border-radius: 4px;
        .el-textarea__inner {
          width: 100%;
          height: 100%;
          background: #f9fbff;
          border: 1px solid #d7dae3;
          border-radius: 4px;
          resize: none;
        }
      }
    }
    > .footer {
      width: 100%;
      height: 112px;
      display: flex;
      align-items: center;
      justify-content: center;
      > .but {
        height: 36px;
        margin-right: 24px;
      }
    }
  }
}
</style>
