<template>
  <div class="registerList resi-container">
    <div v-show="!formShow">
      <el-card ref="searchCard"
               class="search-card">
        <el-form :inline="true"
                 :model="tableParams">
          <div>
            <el-form-item label="所属组织"
                          :label-width="labelWidth">
              <el-cascader v-model="agencyIdArray"
                           style="width:480px"
                           :key="iscascaderShow"
                           :options="options"
                           :props="optionProps"
                           clearable></el-cascader>
            </el-form-item>

            <el-form-item label="问题分类"
                          :label-width="labelWidth">
              <el-select v-model="tableParams.categoryCode"
                         placeholder="问题分类"
                         clearable>
                <el-option v-for="item in categoryList"
                           :key="item.categoryCode"
                           :label="item.categoryName"
                           :value="item.categoryCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题"
                          :label-width="labelWidth">
              <el-input v-model="tableParams.guideTitle"
                        placeholder="标题"
                        clearable>

              </el-input>
            </el-form-item>

            <el-form-item style="margin-left:10px">
              <el-button size="small"
                         @click="loadData()"
                         class="diy-button--search"
                         type="primary">查询</el-button>
              <el-button style="margin-left:10px"
                         class="diy-button--reset"
                         size="small"
                         @click="resetSearch">重置</el-button>
            </el-form-item>
            <!-- <el-form-item v-if="isStaff"
                            style="margin-left:10px">
                <el-button @click="add()"
                          type="primary">新增</el-button>
              </el-form-item> -->
          </div>
        </el-form>
      </el-card>
      <el-card shadow="never">
        <div v-if="isStaff"
             class="resi-row-btn">
          <el-button class="diy-button--add"
                     size="small"
                     @click="add">新增</el-button>
        </div>
        <c-table column-type="index"
                 class="resi-card-table"
                 ref="table"
                 :url="tableUrl"
                 :params="tableParams"
                 :operationWidth="80"
                 keyword="guidanceList"
                 :operations="operations"
                 columnAlign="center"
                 :tableHeight="tableHeight"
                 @detail="detail"
                 @edit="edit"
                 @confirmDel="confirmDel">
        </c-table>

        <!-- <div v-show="formShow">
          <detail-form ref="ref_edit_form"
                      @cancleBack="cancleBack"
                      @refresh="loadData"></detail-form>
        </div> -->
      </el-card>
    </div>
    <el-card v-show="formShow">
      <detail-form ref="ref_edit_form"
                   @cancleBack="cancleBack"
                   @refresh="loadData"></detail-form>
    </el-card>
  </div>
</template>

<script>
import CTable from '@c/CTable'
import DetailForm from './DetailForm'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'

let loading // 加载动画
const customerId = localStorage.getItem('customerId')
export default {
  data () {
    return {
      userId: '',
      isStaff: false,
      //查询条件标题宽度
      labelWidth: '70px',
      formShow: false,

      optionProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',

      },
      options: [],
      agencyIdArray: [],
      iscascaderShow: 0,
      categoryList: [],


      // 列表相关
      tableUrl: '/gov/voice/guide/list',
      // tableUrl: 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/list',
      tableParams: {
        agencyId: '', //
        categoryCode: '', //分类
        guideTitle: '' //标题
      },

      operations: [
        {
          lable: '详情', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'detail', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
        {
          lable: '编辑', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'edit', // 回调方法名称
          isShow: (row) => {
            // return true
            if (row.createdId === this.userId) {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '删除', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'confirmDel', // 回调方法名称
          isShow: (row) => {
            if (row.createdId === this.userId) {
              return true
            } else {
              return false
            }
          }
        }
      ],

    }
  },
  components: {
    CTable,
    DetailForm
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.table.doLayout() // 解决表格错位
    })
  },
  mounted () {
    this.initData()
    console.log(customerId)
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 360
    },

    ...mapGetters(['clientHeight', 'env'])
  },
  methods: {
    //重置搜索条件
    resetSearch () {
      this.tableParams.agencyId = ''
      this.tableParams.categoryCode = ''
      this.tableParams.guideTitle = ''
      this.agencyIdArray = []

      this.pageSize = 10
      this.pageNo = 0
      // this.loadTable()
    },
    async initData () {
      this.startLoading()
      await this.getAgencylist()//获取组织级别
      await this.getcategory()//获取分类
      await this.loadData()//获取指南列表

      let roleList = localStorage.getItem('roleList')
      this.userId = this.$store.state.user.id
      console.log(this.userId)
      if (roleList.indexOf('staff') > -1) {
        this.isStaff = true
      } else {
        this.isStaff = true
      }

      this.endLoading()
    },

    agencyChange (item) {
      if (item.length > 0) {
        // this.tableParams.agencyId = item[item.length - 1]
      }
    },
    loadData () {
      if (this.agencyIdArray.length > 0) {
        this.tableParams.agencyId = this.agencyIdArray[this.agencyIdArray.length - 1]
      } else {
        this.tableParams.agencyId = ''
      }

      this.$refs.table.loadData()
    },

    //新增
    add () {
      this.formShow = true
      this.$refs['ref_edit_form'].initData("", "A")
    },

    // 详情
    detail (row) {

      this.formShow = true
      this.$refs['ref_edit_form'].initData(row.guideId, "D")
    },

    edit (row) {
      this.formShow = true
      this.$refs['ref_edit_form'].initData(row.guideId, "U")
    },

    confirmDel (row) {
      this.$confirm('确认删除当前指南', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.del(row)
      })
    },
    async del (row) {
      const url = '/gov/voice/guide/del'
      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidecategory/delete'

      const params = {
        guideId: row.guideId
      }

      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.$message.success("删除成功")
        this.loadData()

      } else {
        this.$message.error(msg)
      }
    },

    cancleBack () {
      this.formShow = false
    },

    async getAgencylist () {
      const url = '/gov/org/customeragency/agencylist'
      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'

      const params = {}
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        ++this.iscascaderShow
        this.options = []
        this.agencyIdArray.length = []

        this.options.push(data)

      } else {
        this.$message.error(msg)
      }
    },

    async getcategory () {
      const url = '/gov/voice/guidecategory/getcategory'
      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidecategory/getcategory'

      const params = {
        queryOrigin: 'query'
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.categoryList = data

      } else {
        this.$message.error(msg)
      }
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.myNote {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-row-btn {
  margin-bottom: 13px;
  ::v-deep .el-button {
    // margin-left: 10px;
    border: 0;
  }
  .el-button--success {
    background: rgba(34, 193, 195, 1);
  }
}
/* .register .el-table .el-table__header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}*/
/*
.register .el-table .el-table__fixed-body-wrapper {
  height: calc(100% - 44px);
  margin-top: 44px;
  overflow-y: auto !important;
} */
</style>

