<template>
  <div>
    <el-dialog title="填报详情" width="860px" :visible.sync="visible">

      <xy-table style="width: 820px"
                stripe
                ref="xyTable"
                :height="500"
                :list="list"
                :table-item="table">
                <template v-slot:btns>
                  <div></div>
                </template>
      </xy-table>
    </el-dialog>

    <el-drawer
      title="内容详情"
      :visible.sync="isShowDrawer"
      position="rtl"
      size="750px"
      :wrapper-closable="false"
    >
      <div style="padding: 20px 40px">
        <el-form
          class="form"
          ref="elForm"
          :model="showInfoDetail"
          label-width="80px"
          size="small"
        >
          <el-form-item label="标题" prop="title">
            {{showInfoDetail.title}}
          </el-form-item>
          <el-form-item label="内容" required prop="content">
            {{showInfoDetail.content}}
          </el-form-item>
          <el-form-item label="附件" prop="files">
            <div v-if="showInfoDetail.files&&showInfoDetail.files.length>0">
              <div v-for="item in showInfoDetail.files">
                <a style="color:blue" :href="item.url" target="_blank">{{item.original_name}}</a>
              </div>
            </div>
           <!-- <el-upload
              class="upload-demo"
              :action="action"
              multiple
              :limit="10"
              :headers="{
                'Authorization': 'Bearer ' + getToken(true)
              }"
              :before-upload="beforeUpload"
              :on-success="uploadSuccess"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload> -->
          </el-form-item>
          <!-- <el-form-item label="所属周期" prop="_week">
            <el-input
              placeholder="请选择所属周期"
              readonly
              v-model="form._week"
            ></el-input>
          </el-form-item> -->

          <el-form-item>
            <el-button @click="isShowDrawer = false,showInfoDetail={}">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

  </div>
</template>

<script>
// import { getByCategory, recordShow } from "@/api/fill/index";
export default {
  data() {
    return {
      auth: [],
      visible: false,
      isShowDrawer:false,
      showInfoDetail:{},
      list:[],
      select:{
        category_id: "",
        person_id:''
      },

      table: [
        {
          prop: "title",
          label: "标题",
          fixed: "left",
          width: 180
        },
        {
          prop: "created_at",
          label: "填报日期",
          width: 160
        },
        {
          prop: "content",
          label: "内容",
          align: "left",
          minWidth: 200
        },
        {
          prop: "operate",
          label: "操作",
          align: "center",
          width: 80,
          customFn: row => {
            const _this = this
            return (
              <div>
                <Button type="primary"
                size="small"
                on={{
                  ['click']:_ => {
                    this.showInfo(row.id)
                  }
                }}>查看</Button>
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {

    getList(){
      getByCategory({
        person_id:this.select.person_id,
        category_id:this.select.category_id
      }).then(res=>{
        this.list = res.data
      })
    },
    show () {
      this.visible = true;
    },
    hide () {
      this.visible = false;
    },
    setId (id) {
      this.select.category_id = id;
    },
    setPersonId (id) {
      this.select.person_id = id;
    },
    getData () {
      this.$refs['xyTable'].getTableData()
    },
    showInfo(id){
      recordShow({
        id:id
      }).then(res=>{
        this.showInfoDetail = res
        this.isShowDrawer = true
      })
    },

  },
  computed: {},
  watch: {
    visible (newVal) {
      if (newVal) {
        this.$nextTick(_ => {
          // this.getList()
        })
      } else {

      }
    }
  },
  created() {
  }
}
</script>

<style scoped lang="scss">
</style>
