<template>
  <div class="announce-manage card">
    <el-form
      ref="form"
      :model="searchForm"
      size="mini"
      v-enter-submit="search"
      @submit.native.prevent
      :inline="true"
    >
      <el-form-item label="应用名称">
        <el-input
          style="width: 120px"
          clearable
          v-model="searchForm.employeeName"
          placeholder="应用名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="应用分类">
        <el-select
          v-model="searchForm.creator"
          placeholder="请选择"
          clearable
          filterable
        >
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.realName"
            :value="user.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          style="width: 164px"
          v-model="searchForm.time"
          align="right"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <!-- <el-input v-model="searchForm.time"></el-input> -->
      </el-form-item>
      <el-form-item label>
        <el-button
          type="primary"
          native-type="submit"
          @click="search()"
        >
          查询
        </el-button>
      </el-form-item>
      <el-form-item label>
        <el-button type="success" @click="editDialog()"
        >新增
        </el-button
        >
      </el-form-item>
      <el-form-item label>
        <el-button type="danger" @click="editDialog()"
        >删除
        </el-button
        >
      </el-form-item>
    </el-form>
    <div class="table_wrap" style="padding: 0">
      <table-view
        :sourceData="sourceData"
        :serialNumber="false"
        :tableColumns="tableColumns"
      ></table-view>
    </div>
    <pagination
      :setValue="setpaginationOptions"
      :options="paginationOptions"
    />
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div class="app-form">
        <div class="img">
          <img
            src="https://img0.baidu.com/it/u=2426072799,1960439289&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=11922fc3c027b8ac0f9bd5ef82d518c7"
            alt="">
        </div>
        <div class="form">
          <el-form
            :model="editForm"
            :inline="true"
            label-width="80px"
            :rules="addrules"
            size="mini"
            ref="editForm"
          >
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item
                  label="应用名称"
                  size="small"
                  prop="title"
                >
                  <el-input
                    style="width: 100%"
                    v-model="editForm.title"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="应用分类"
                  size="small"
                  prop="title"
                >
                  <el-select
                    style="width: 100%;"
                    v-model="searchForm.creator"
                    placeholder="请选择"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="user in userList"
                      :key="user.id"
                      :label="user.realName"
                      :value="user.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="应用简述"
                  size="small"
                  prop="title"
                >
                  <el-input
                    style="width: 100%"
                    type="textarea"
                    :rows="4"
                    v-model="editForm.title"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="应用详情"
                  size="small"
                  prop="title"
                >
                  <v-editor
                    filename="files"
                    style="width: 100%"
                    v-model="editForm.content"
                    ref="wangeditor"
                    height="300px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="width: 100%;">
              <el-col :span="11">
                <el-form-item
                  label="应用价格"
                  size="small"
                  prop="title"
                >
                  <el-input
                    style="width: 100%"
                    v-model="editForm.title"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="应用周期"
                  size="small"
                  prop="title"
                >
                  <el-select
                    style="width: 100%"
                    v-model="searchForm.creator"
                    placeholder="请选择"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="user in userList"
                      :key="user.id"
                      :label="user.realName"
                      :value="user.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col style="display: flex;margin-top: 3px;" :span="2">
                <el-button size="mini" type="success" icon="el-icon-plus"></el-button>
                <el-button style="margin-left: 15px" size="mini" type="danger" icon="el-icon-minus"></el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <div style="display: flex;justify-content: flex-end" slot="footer">
        <el-button
          size="mini"
          style="width: 80px;"
          @click="dialogVisible = false"
        >取 消
        </el-button
        >
        <el-button
          size="mini"
          style="margin-left: 20px;width: 80px;"
          type="primary"
          @click="submit"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="releaseVisible"
      :close-on-click-modal="false"
      title="发布"
      width="600px"
    >
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选
      </el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="checkedCompany"
        @change="handleCheckedCompanyChange"
      >
        <el-checkbox
          style="width: 100px"
          v-for="c in releaseList"
          :label="c.id"
          :key="c.id"
        >{{ c.apiName }}
        </el-checkbox
        >
      </el-checkbox-group>
      <span slot="footer">
        <el-button
          size="mini"
          @click="releaseVisible = false"
        >取消</el-button
        >
        <el-button
          size="mini"
          @click="confirmRelease"
          type="primary"
        >确认</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>
<script>
import Editor from '@/components/wangeditor/index.vue'
import tableView from '@/common/components/base/tableView.vue'
import { get, post } from '@/common/api/axios'
import { getSystemUserList } from '@/common/api/system'

export default {
  name: 'system_announce_manage',
  components: {
    'v-editor': Editor,
    tableView
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      checkedCompany: [],
      userList: [],
      pageSize: 50,
      currentPage: 1,
      total: 1,
      paginationOptions: {
        pageSize: 100,
        currentPage: 1,
        total: 0
      },
      addrules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ]
      },
      sourceData: [],
      searchForm: {},
      isEdit: false,
      dialogVisible: false,
      editForm: {
        title: ''
      },
      defaultEditFrom: {
        title: '',
        enableFlag: false,
        content: '',
        priority: false
      },
      releaseVisible: false,
      releaseList: []
    }
  },
  mounted() {
    this.getList()
    this.getSystemUserList()
  },
  computed: {
    tableColumns() {
      return [
        {
          label: '应用名称',
          key: 'title',
          align: 'left'
        },
        {
          label: '应用分类',
          key: 'creatorName'
        },
        {
          label: '应用简述',
          key: 'creatorName1'
        },
        {
          label: '应用服务期',
          key: 'creatorName2'
        },
        {
          label: '创建时间',
          key: 'creationTime'
        },
        {
          label: '操作',
          width: 150,
          render: (item) => (
            <div>
                <span
                  class="icon-view icon-edit-view"
                  title="编辑"
                  onClick={() => this.editDialog(item)}
                >
                  <i class="el-icon-edit"></i>
                </span>
              <span
                class="icon-view icon-del-view"
                title="删除"
                onClick={() => this.deleteAnnounces(item)}
              >
                  <i class="el-icon-delete"></i>
                </span>
              <span
                class="icon-view"
                style="background:yellowgreen"
                title="字段配置"
                onClick={() => this.fieldSet(item)}
              >
                  <i class="el-icon-c-scale-to-original"></i>
                </span>
            </div>
          )
        }
      ]
    }
  },
  methods: {
    fieldSet(item) {
      this.$router.push('/dynamicForm')
    },
    handleCheckAllChange(val) {
      this.checkedCompany = val
        ? this.releaseList.map((e) => e.id)
        : []
      this.isIndeterminate = false
    },
    handleCheckedCompanyChange(value) {
      const checkedCount = value.length
      this.checkAll =
        checkedCount === this.releaseList.length
      this.isIndeterminate =
        checkedCount > 0 &&
        checkedCount < this.releaseList.length
    },
    search() {
      this.getList()
    },
    async getSystemUserList() {
      try {
        const res = await getSystemUserList()
        this.userList = res.data
      } catch (e) {
        console.error(e)
      }
    },
    setpaginationOptions(opt) {
      for (const key in opt) {
        this.paginationOptions[key] = opt[key]
      }
      this.getList()
    },
    async getList() {
      try {
        const {
          pageSize,
          currentPage
        } =
          this.paginationOptions
        const res = await post('sys/announcement/list', {
          pageSize,
          currentPage,
          ...this.searchForm
        })
        if (res.code !== 200) return
        this.sourceData = res.data.records
        this.paginationOptions.total = res.data.total
      } catch (e) {
        console.error(e)
      }
    },
    currentChange(i) {
      this.currentPage = i
      this.getList()
    },
    async editDialog(item) {
      if (item) {
        try {
          const res = await get(
            'sys/announcement/get/' + item.id
          )
          if (res.code !== 200) return
          this.editForm = {
            ...this.editForm,
            ...res.data
          }
          this.isEdit = true
        } catch (e) {
          console.error(e)
        }
      } else {
        this.editForm = JSON.parse(
          JSON.stringify(this.defaultEditFrom)
        )
        this.$nextTick(() => {
          this.$refs.editForm.clearValidate()
        })
        this.isEdit = false
      }
      this.dialogVisible = true
    },
    async submit() {
      try {
        await this.$refs.editForm.validate()
      } catch {
        return
      }

      try {
        const url = this.isEdit
          ? 'sys/announcement/edit'
          : 'sys/announcement/add'
        const res = await post(url, { ...this.editForm })
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.dialogVisible = false
        this.getList()
      } catch (e) {
        console.error(e)
      }
    },
    async enableChange(item, val) {
      try {
        const res = await post('sys/announcement/edit', {
          id: item.id,
          enableFlag: val
        })
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.getList()
      } catch (e) {
        console.error(e)
      }
    },
    async release(item) {
      try {
        const res = await post('sys/domain/list')
        if (res.code !== 200) return
        this.releaseList = res.data
        this.rowId = item.id
        this.checkedCompany = []
        this.releaseVisible = true
      } catch (e) {
        console.error(e)
      }
    },
    async deleteAnnounces(item) {
      try {
        const res = await get(
          'sys/announcement/delete/' + item.id
        )
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.getList()
      } catch (e) {
        console.error(e)
      }
    },
    async confirmRelease() {
      if (this.checkedCompany.length === 0) {
        return this.$message.warning('请至少选择一条记录')
      }
      try {
        const res = await post('sys/announcement/publish', {
          id: this.rowId,
          dataSourcelist: this.checkedCompany
        })
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.releaseVisible = false
        this.getList()
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.announce-manage {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 20px 0;
  overflow: hidden;
}

.app-form {
  display: flex;
  align-items: flex-start;

  .form {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;

    ::v-deep .el-form-item__label {
      white-space: nowrap;
    }

    ::v-deep .el-form-item {
      display: flex;
    }

    ::v-deep .el-form {
      display: flex;
      flex-wrap: wrap;
    }

    ::v-deep .el-form-item__content {
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
    }
  }

  .img {
    width: 150px;
    height: 150px;
    margin-right: 25px;

    img {
      width: 100%;
      height: 100%;
    }

  }

}

.el-row {
  align-items: center;
}
</style>
