<template>
  <div class="content-outer bi-log-table">
    <BiSearchBlock v-show="!drawerModel">
      <BiForm>
        <BiFormItem>
          <template slot="label">模块</template>
          <template slot="content">
            <el-select
              v-model="formData.model"
              size="small"
              clearable
              multiple
              placeholder="请输入"
              filterable
              reserve-keyword
              collapse-tags
            >
              <el-option
                v-for="(item, index) in optionsList.model"
                :key="index"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>

        <BiFormItem>
          <template slot="label">操作</template>
          <template slot="content">
            <el-select
              v-model="formData.operate_name"
              size="small"
              clearable
              multiple
              placeholder="请输入"
              filterable
              reserve-keyword
              collapse-tags
            >
              <el-option
                v-for="(item, index) in optionsList.operate_name"
                :key="index"
                :label="item.label"
                :value="item.id"
              > </el-option>
            </el-select>
          </template>
        </BiFormItem>

        <BiFormItem>
          <template slot="label">操作人</template>
          <template slot="content">
            <el-input
              v-model="formData.operator"
              size="small"
              clearable
              placeholder="请输入内容"
            />
          </template>
        </BiFormItem>

        <BiFormItem>
          <template slot="select">
            <el-select
              v-model="formData.object_type"
              :clearable="false"
              placeholder="请选择"
            >
              <el-option
                label="对象ID"
                value="id"
              ></el-option>
              <el-option
                label="对象名称"
                value="name"
              ></el-option>
            </el-select>
          </template>
          <template slot="content">
            <el-input
              v-model="formData.id"
              size="small"
              clearable
              placeholder="请输入内容"
            />
          </template>
        </BiFormItem>

        <BiFormItem>
          <template slot="label">操作日期</template>
          <template slot="content">
            <DatePicker
              v-model="formData.operate_time"
              size="small"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :clearable="false"
              popper-class="bi-log-operate_time-popper"
              @change="handleOperateTimeChange"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              type="primary"
              size="small"
              :loading="tableLoading"
              :disabled="tableLoading"
              @click="clickSearch"
            >查询</el-button>
            <el-button
              size="small"
              @click="reset"
            >重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </BiSearchBlock>

    <BiBlock class="content-table">
      <Table
        class="log-table"
        :loading="tableLoading"
        :data="tableData"
        size="medium"
        :header-cell-style="tableRowClassName"
        :column="tableColums"
        fixed="sticky"
        max-height="200px"
        :sticky-top="BiLogDialog?0:50"
        :pagination="true"
        layout="prev,pager,next"
        :auto-scroll="false"
        :total="total"
        :limit="formData.limit"
        :page.sync="formData.page"
        @pagination="pageSearch"
      />
      <LogDetail v-if="false" />
    </BiBlock>
  </div>
</template>

<script>
import moment from 'moment'
import DatePicker from '../../DatePicker'
import Table from '../../Table'
import LogDetail from './Detail.vue'
export default {
  name: 'BiLog',
  components: { DatePicker, Table, LogDetail },
  props: {
    logId: {
      type: String,
      default: ''
    },
    logModel: {
      type: String,
      default: ''
    }
  },
  inject: {
    BiLogDialog: {
      from: 'BiLogDialog',
      default: null
    }
  },
  data() {
    return {
      formData: {
        id: '',
        model: '',
        operate_name: '',
        operate_time: [],
        object_type: 'name',
        operator: '',
        page: 1,
        limit: 50
      },
      pageCount: 2,
      optionsList: {
        model: [],
        operate_name: []
      },
      tableLoading: false,
      selectLoading: false,
      tableData: [],
      tableColums: [],
      drawerTableColums: [
        {
          prop: 'operator',
          label: '操作人',
          width: 180,
          render: (h, { row }) => {
            return (
              <div>
                <p class={'operator'}>{row.operator}</p>
                <p class={'operate-time'}>{row.operateTime}</p>
              </div>
            )
          }
        },
        {
          prop: 'operateName',
          label: '操作',
          width: 80
        },
        {
          prop: 'operateName',
          label: '详情',
          render: (h, { row }) => {
            if (row.showLength === 3) {
              return (
                <div>
                  <LogDetail data={this.fomartOperates(row)} />
                  <div class={'log-more'}>
                    <el-button
                      type={'text'}
                      onClick={() => {
                        this.showMore(row)
                      }}
                    >
                      更多
                      <i class={'el-icon-caret-bottom el-icon--right'}></i>
                    </el-button>
                  </div>
                </div>
              )
            } else {
              return <LogDetail data={row} />
            }
          }
        }
      ],
      defaultTableColums: [
        {
          prop: 'operator',
          label: '操作人',
          width: 180,
          render: (h, { row }) => {
            return (
              <div>
                <p class={'operator'}>{row.operator}</p>
                <p class={'operate-time'}>{row.operateTime}</p>
              </div>
            )
          }
        },
        {
          prop: 'operateName',
          label: '操作',
          width: 80
        },
        {
          prop: 'model_name',
          label: '模块',
          width: 100
        },
        {
          prop: 'objectName',
          label: '对象',
          width: 85,
          render: (h, { row }) => {
            return (
              <div>
                <p class={'object-name'}>{row.objectName}</p>
                <p class={'object-id'}>id: {row.objectId}</p>
              </div>
            )
          }
        },
        {
          prop: 'operateName',
          label: '详情',
          minWidth: 280,
          render: (h, { row }) => {
            if (row.showLength === 3) {
              return (
                <div>
                  <LogDetail data={this.fomartOperates(row)} />
                  <div class={'log-more'}>
                    <el-button
                      type={'text'}
                      onClick={() => {
                        this.showMore(row)
                      }}
                    >
                      更多
                      <i class={'el-icon-caret-bottom el-icon--right'}></i>
                    </el-button>
                  </div>
                </div>
              )
            } else {
              return <LogDetail data={row} />
            }
          }
        }
      ],
      tableRowClassName: {}
    }
  },
  computed: {
    params() {
      const { id, model, operate_name, operate_time, object_type, operator, page, limit } = Object.assign({}, this.formData)
      const [operate_time_start = '', operate_time_end = ''] = operate_time || []
      return {
        id,
        model: model.toString(),
        operate_name: operate_name.toString(),
        operate_time_start,
        operate_time_end,
        object_type,
        operator,
        page,
        limit
      }
    },
    drawerModel() {
      return this.logId && this.logModel
    },
    total() {
      return this.pageCount * this.formData.limit
    }
  },

  mounted() {
    this.formData.operate_time = [moment().subtract(24, 'hour').format('yyyy-MM-DD HH:mm:ss'), moment().format('yyyy-MM-DD HH:mm:ss')]
    if (process.env.NODE_ENV === 'development') {
      this.formData.operate_time = ['2022-05-01 00:00:00', '2022-09-31 00:00:00']
    }
    if (this.drawerModel) {
      this.formData.id = this.logId
      this.formData.model = [this.logModel]
      this.formData.object_type = 'id'
      this.formData.operate_time = []
      this.tableColums = this.drawerTableColums
    } else {
      this.tableColums = this.defaultTableColums
      this.initOptions()
      this.clickSearch()
    }
  },
  methods: {
    handlerOpen() {
      if (this.drawerModel) {
        this.formData.id = this.logId
        this.formData.model = [this.logModel]
        this.formData.object_type = 'id'
        this.formData.operate_time = []
        this.tableColums = this.drawerTableColums
      }
      this.clickSearch()
    },
    initOptions() {
      this.$BI
        .request({
          url: '/systemlog/options',
          method: 'post'
        })
        .then((res) => {
          if (res.status_code === 1) {
            this.optionsList.model = res.data.model
            this.optionsList.operate_name = res.data.operate_name
          }
        })
    },
    singleLogSearch() {},
    clickSearch() {
      this.formData.page = 1
      this.pageCount = 1
      this.dataSearch()
    },
    pageSearch({ page }) {
      this.dataSearch()
    },
    dataSearch() {
      this.tableLoading = true
      this.$BI
        .request({
          url: '/systemlog/list',
          method: 'post',
          data: this.params
        })
        .then((res) => {
          if (res.status_code === 1) {
            if (this.params.page > 1) {
              if (res.data.data.length) {
                this.tableData = res.data.data
              }
            } else {
              this.tableData = res.data.data
            }
            if (this.params.page >= this.pageCount) {
              if (res.data.data.length < this.formData.limit) {
                this.pageCount = this.params.page
              } else {
                this.pageCount = this.params.page + 1
              }
            }

            this.tableData.map((item) => {
              this.$set(item, 'showLength', item.operates && item.operates.length > 3 ? 3 : 0)
            })
          }
          this.tableLoading = false
        })
    },
    reset() {
      this.$set(this, 'formData', {
        id: '',
        model: '',
        operate_name: '',
        operate_time: [moment().subtract(24, 'hour').format('yyyy-MM-DD HH:mm:ss'), moment().format('yyyy-MM-DD HH:mm:ss')],
        object_type: 'name',
        operator: '',
        page: 1,
        limit: 50
      })
    },

    getsearchAdvertiser() {},
    handleOperateTimeChange(value) {
      if (value === null) {
        this.formData.operate_time = [moment().subtract(-24, 'hour').format('yyyy-MM-DD HH:mm:ss'), moment().format('yyyy-MM-DD HH:mm:ss')]
      }
    },
    fomartOperates(row) {
      try {
        const data = JSON.parse(JSON.stringify(row))
        const { showLength } = data
        if (showLength === 3) {
          data.operates = data.operates.slice(0, 3)
          return data
        } else {
          return row
        }
      } catch (error) {
        return row
      }
    },
    showMore(row) {
      row.showLength = 0
    }
  }
}
</script>
<style lang="scss" scoped>
.content-outer {
  width: 100%;

  .content-head {
    width: 100%;

    padding: 20px 0 0 !important;
    margin-bottom: 0 !important;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
  }

  .content-table {
    width: 100%;
    padding: 15px;
    ::v-deep.pagination-container {
      text-align: center;
    }
  }
}
.el-input {
  ::v-deep .el-select {
    .el-input.el-input--suffix {
      width: 80px;

      .el-input__inner {
        padding-right: 10px;
        padding-left: 10px;
      }
      .el-input__suffix {
        right: 0;
        .el-input__icon {
          width: 15px;
        }
      }
    }
  }
}

.log-table {
  ::v-deep .cell {
    p,
    div {
      margin: 0;
      font-size: 14px;
      // font-weight: 400;
      // color: #333333;
    }

    .operate-time {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .object-id {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }

    .log-more {
      text-align: center;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(rgba($color: #fff, $alpha: 0), rgba($color: #fff, $alpha: 1), rgba($color: #fff, $alpha: 1));
      .el-button {
        padding: 0;
      }
    }
  }
}
</style>
<style lang="scss">
.bi-log-operate_time-popper {
  .el-picker-panel__footer > .el-picker-panel__link-btn:first-child {
    display: none;
  }
}
</style>
