<template>
  <div class="app-container">
    <div class="page-header">轮播图管理</div>
    <el-divider></el-divider>
    <div class="btn-group">
      <el-button type="primary" size="small" @click=";(dialogVisible = true), (type = 1)">新增</el-button>
      <el-button size="small" type="danger" @click="batchDelete()">删除</el-button>
    </div>
    <div class="mymain-container">
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          align="center"
          label="轮播图名称"
          prop="imgCarouselName"
          min-width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="轮播图" prop="imgCarouselUrl" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <a :href="scope.row.imgCarouselUrl">
              <img :src="scope.row.imgCarouselUrl" alt="轮播图" class="el-image__inner el-image__preview" />
            </a>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="排序"
          prop="imgCarouselOrder"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="状态" prop="status" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="z-index: 99">
              <el-tag type="success" v-if="scope.row.status == '1'">显示</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status == '0'">隐藏 </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="160">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="hanleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="hanleStatus(scope.row.id)" v-if="scope.row.status === '1'"
              >隐藏</el-button
            >
            <el-button type="text" size="small" @click="hanleStatus(scope.row.id)" v-if="scope.row.status === '0'"
              >显示</el-button
            >
            <el-popconfirm
              title="确定要删除这张轮播图吗？"
              style="margin-left: 10px"
              @confirm="hanleDelete(scope.row.id)"
            >
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <div class="setting_title">备案管理</div>
      <el-divider></el-divider>
      <el-card shadow="never" class="my-card">
        <el-form class="my-form" ref="mainForm" :model="comPanyDialogForm" label-width="120px" label-position="right">
          <el-form-item label="ICP备案:" prop="nickName">
            <el-input autocomplete="off" placeholder="请输入" v-model="comPanyDialogForm.icpRecord"></el-input>
          </el-form-item>
          <el-form-item label="ICP备案链接:" prop="nickName">
            <el-input autocomplete="off" placeholder="请输入" v-model="comPanyDialogForm.icpRecordLink"></el-input>
            (填写链接，可跳转至链接页面)
          </el-form-item>
          <el-form-item label="公网安备案:" prop="nickName">
            <el-input autocomplete="off" placeholder="请输入" v-model="comPanyDialogForm.pubSecurityRecord"></el-input>
          </el-form-item>
          <el-form-item label="公网安备案链接:" prop="nickName">
            <el-input
              autocomplete="off"
              placeholder="请输入"
              v-model="comPanyDialogForm.pubSecurityRecordLink"
            ></el-input>
            (填写链接，可跳转至链接页面)
          </el-form-item>
          <div class="setting_title">公司名称管理</div>
          <el-divider></el-divider>
          <el-form-item label="公司名称:" prop="nickName">
            <el-input autocomplete="off" placeholder="单行输入" v-model="comPanyDialogForm.companyName"></el-input>
          </el-form-item>
          <el-form-item label="系统名称:" prop="nickName">
            <el-input autocomplete="off" placeholder="单行输入" v-model="comPanyDialogForm.sysName"></el-input>
          </el-form-item>
          <el-form-item label="logo:" prop="nickName">
            <ImageUpload :fileList="fileList2" uid="fileList2" />
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <br />
    <!-- 友链管理--------------- -->
    <div class="page-header">友链管理</div>
    <el-divider></el-divider>
    <div class="btn-group">
      <el-button type="primary" size="small" @click="addDict">新增</el-button>
      <el-button size="small" type="danger" @click="delDict">删除</el-button>
    </div>
    <div class="mymain-container">
      <el-table
        v-loading="listLoading"
        :data="dictList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        @selection-change="dictSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          align="center"
          label="友链名称"
          prop="amityUrlName"
          min-width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="友链地址" prop="amityUrl" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          align="center"
          label="排序"
          prop="amityUrlSort"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="状态" prop="status" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="z-index: 99">
              <el-tag type="success" v-if="scope.row.status == 'ON'">显示</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status == 'OFF'">隐藏 </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="160">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="dictEdit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="hanleStatusDict(scope.row.amityUrlId, 'OFF')"
              v-if="scope.row.status === 'ON'"
              >隐藏</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="hanleStatusDict(scope.row.amityUrlId, 'ON')"
              v-if="scope.row.status === 'OFF'"
              >显示</el-button
            >
            <el-popconfirm title="确定要删除吗？" style="margin-left: 10px" @confirm="dictDelete(scope.row.amityUrlId)">
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-footer">
      <div class="footer">
        <el-button type="primary" @click="addComPany">确定</el-button>
      </div>
    </div>
    <div>
      <el-dialog :visible.sync="dialogVisible" width="50%" @close="resetForm" :close-on-click-modal="false">
        <el-form ref="dialogForm" :model="dialogForm" :rules="type == 1 ? rules : {}" label-width="120px" size="normal">
          <el-form-item label="轮播图名称" prop="saleCode">
            <el-input v-model="dialogForm.imgCarouselName"></el-input>
          </el-form-item>
          <el-form-item label="轮播图" prop="fileUrl">
            <ImageUpload :fileList="fileList" uid="fileList" />
          </el-form-item>
          <el-form-item label="排序" prop="mainId">
            <el-input v-model="dialogForm.imgCarouselOrder"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click=";(dialogVisible = false), resetForm()">取 消</el-button>
          <el-button type="primary" @click="addImgCarousel">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 友链管理---弹窗 -->
    <div>
      <el-dialog
        :modal="true"
        title="友情链接"
        :visible.sync="dictDialog"
        width="50%"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
      >
        <el-form
          ref="dictForm"
          size="mini"
          :rules="dictRules"
          :model="dictForm"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="友链名称:" prop="amityUrlName">
            <el-input v-model="dictForm.amityUrlName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="友链地址:" prop="amityUrl">
            <el-input v-model="dictForm.amityUrl" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="logo:" prop="amityUrlLogo">
            <ImageUpload :fileList="dictFileList" uid="dictFileList" />
          </el-form-item>
          <el-form-item label="排序:" prop="amityUrlSort">
            <el-input v-model="dictForm.amityUrlSort" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dictCancel">取 消</el-button>
          <el-button size="mini" @click="dictConfirm" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Mixin from '@/mixin/index'
import Pagination from '@/components/Pagination'
import ImageUpload from '@/components/file-upload'
import {
  getImgCarouseList,
  handleImgIsShow,
  addImgCarousel,
  delImgData,
  addCompany,
  editImgCarousel,
  getCompanyList,
  dictAmityPage,
  dictAmityAdd,
  dictAmityDel,
  dictAmityUpdate,
  dictAmityStatus
} from '@/api/policy_list'

export default {
  mixins: [Mixin],
  data() {
    return {
      imageURL: '',
      type: 0, // 0,1
      screenForm: {
        companyRecordManageId: '',
        imgCarouselName: '',
        imgCarouselUrl: '',
        imgCarouselOrder: '',
        status: ''
      },
      dialogForm: {
        id: '',
        companyRecordManageId: '',
        imgCarouselName: '',
        imgCarouselUrl: '',
        imgCarouselOrder: '',
        status: '1'
      },
      comPanyDialogForm: {
        id: '',
        icpRecord: '',
        icpRecordLink: '',
        pubSecurityRecord: '',
        pubSecurityRecordLink: '',
        companyName: '',
        sysName: '',
        logo: ''
      },
      dataList: [
        {
          date: '2016-05-02',
          name: '王小虎',
          label: '姓名',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      columns: [
        {
          prop: 'imgCarouselName',
          lable: '轮播图名称',
          widht: 160
        },
        {
          prop: 'imgCarouselUrl',
          lable: '轮播图',
          widht: 200
        },
        {
          prop: 'imgCarouselOrder',
          lable: '排序',
          widht: 160
        },
        {
          prop: 'createTime',
          lable: '创建时间',
          widht: 160
        },
        {
          prop: 'status',
          lable: '状态',
          widht: 120
        }
      ],
      rules: {
        imgCarouselName: [{ required: true, message: '请输入轮播图名称', trigger: 'blur' }]
      },
      productList: [],
      fileList: [],
      multipleSelection: [],
      fileList2: [],

      dictForm: {
        amityUrlName: '',
        amityUrl: '',
        amityUrlLogo: '',
        amityUrlSort: ''
      },
      dictDialog: false,
      dictRules: {},
      dictFileList: [],
      dictList: [],
      amityUrlId: '',
      dictSelectList: []
    }
  },
  watch: {
    fileList2() {
      if (this.fileList2[0]) {
        this.comPanyDialogForm.logo = this.fileList2[0].url
      } else {
        this.comPanyDialogForm.logo = ''
      }
    }
  },
  created() {
    this.getDictAmityPage()
  },
  methods: {
    async hanleStatusDict(id, status) {
      await dictAmityStatus({
        amityUrlId: id,
        status: status
      })
      this.$message.success(status === 'OFF' ? '已隐藏' : '已显示')
      this.getDictAmityPage()
    },
    async delDict() {
      let params = {
        amityUrlIds: this.dictSelectList.map(v => v.amityUrlId).toString()
      }
      await dictAmityDel(params)
      this.$message.success('删除成功')
      this.getDictAmityPage()
    },
    dictSelectionChange(value) {
      this.dictSelectList = value
    },
    dictEdit(value) {
      // console.log(value)
      this.amityUrlId = value.amityUrlId
      this.dictForm = {
        amityUrlName: value.amityUrlName,
        amityUrl: value.amityUrl,
        amityUrlLogo: '',
        amityUrlSort: value.amityUrlSort
      }
      if (value.amityUrlLogo === '') {
        this.dictFileList = []
      } else {
        this.dictFileList = [
          {
            hover: false,
            name: '',
            url: value.amityUrlLogo
          }
        ]
      }

      this.dictDialog = true
    },
    async dictDelete(amityUrlIds) {
      console.log(amityUrlIds)
      await dictAmityDel({ amityUrlIds: amityUrlIds })
      this.$message.success('删除成功')
      this.getDictAmityPage()
    },
    //
    addDict() {
      this.amityUrlId = ''
      this.dictDialog = true
    },
    //
    dictCancel() {
      this.dictForm = {
        amityUrlName: '',
        amityUrl: '',
        amityUrlLogo: '',
        amityUrlSort: ''
      }
      this.dictFileList = []
      this.dictDialog = false
    },
    //
    async dictConfirm() {
      let params = {
        amityUrlId: this.amityUrlId,
        amityUrlName: this.dictForm.amityUrlName,
        amityUrl: this.dictForm.amityUrl,
        amityUrlLogo: this.dictFileList.length == 0 ? '' : this.dictFileList[0].url,
        amityUrlSort: this.dictForm.amityUrlSort
      }

      if (this.amityUrlId === '') {
        await dictAmityAdd(params)
        this.$message.success('新增成功')
      } else {
        await dictAmityUpdate(params)
        this.$message.success('编辑成功')
      }

      this.getDictAmityPage()
      this.dictCancel()
    },
    //获取友情链接列表
    async getDictAmityPage() {
      let params = {
        pageNum: 1,
        pageSize: -1
      }
      let { data } = await dictAmityPage(params)
      this.dictList = data.records
    },

    getList() {
      this.listLoading = true
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        saleCode: this.screenForm.saleCode,
        saleName: this.screenForm.saleName,
        mainId: '',
        status: this.screenForm.status
      }
      getCompanyList().then(res => {
        if (res.data) {
          this.comPanyDialogForm.id = res.data[0].id
          this.comPanyDialogForm.icpRecord = res.data[0].icpRecord
          this.comPanyDialogForm.icpRecordLink = res.data[0].icpRecordLink
          this.comPanyDialogForm.pubSecurityRecord = res.data[0].pubSecurityRecord
          this.comPanyDialogForm.pubSecurityRecordLink = res.data[0].pubSecurityRecordLink
          this.comPanyDialogForm.companyName = res.data[0].companyName
          this.comPanyDialogForm.sysName = res.data[0].sysName
          this.comPanyDialogForm.logo = res.data[0].logo
          this.fileList2 = res.data[0].logo ?  [{ url: res.data[0].logo }] : []
        }
      })
      getImgCarouseList(params).then(res => {
        this.dataList = res.data
        this.listLoading = false
      })
    },
    handleChange(e) {
      this.productList.find(k => {
        if (k.productCategoryNumber == e) {
          this.dialogForm.mainId = k.productCategoryNumber
          this.dialogForm.mainName = k.productCategoryName
          this.screenForm.mainId = k.productCategoryNumber
          this.screenForm.mainName = k.productCategoryName
        }
      })
    },
    hanleDelete(id) {
      this.hanleDeleteAllPromise(id).then(ids => {
        delImgData({
          ids: ids[0]
        }).then(res => {
          this.$successMsg('删除成功')
          this.hanleReset()
        })
      })
    },
    hanleEdit(item) {
      this.dialogForm = {
        id: item.id,
        companyRecordManageId: item.companyRecordManageId,
        imgCarouselName: item.imgCarouselName,
        imgCarouselUrl: item.imgCarouselUrl,
        imgCarouselOrder: item.imgCarouselOrder,
        status: item.status
      }
      this.fileList = [{ url: item.imgCarouselUrl }]
      this.type = 0
      this.dialogVisible = true
    },
    hanleDateil(item) {
      this.dialogVisible = true
      this.dialogForm = {
        ...item
      }
      this.type = 3
    },
    hanleStatus(id) {
      handleImgIsShow({
        id: id
      }).then(res => {
        this.$successMsg('状态已更改')
        this.hanleReset()
      })
    },
    addImgCarousel() {
      if (this.type == 1) {
        this.$refs.dialogForm.validate(valid => {
          if (valid) {
            this.dialogForm.imgCarouselUrl = this.fileList[0].url
            const params = {
              ...this.dialogForm
            }
            addImgCarousel(params).then(res => {
              this.$successMsg('添加成功')
              this.hanleReset()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else if (this.type == 0) {
        const upParams = {
          ...this.dialogForm,
          imgCarouselUrl: this.fileList[0].url
        }
        editImgCarousel(upParams).then(res => {
          this.$successMsg('修改成功')
          this.hanleReset()
        })
      } else {
        this.dialogVisible = false
      }
    },
    // 表格选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //添加公司信息
    addComPany() {
      const params = {
        ...this.comPanyDialogForm
      }
      addCompany(params).then(res => {
        this.$successMsg('添加成功')
        this.hanleReset()
      })
    },
    resetForm(formName) {
      this.$refs.dialogForm.resetFields()
    },
    hanleReset() {
      this.dialogForm = {
        companyRecordManageId: '',
        imgCarouselName: '',
        imgCarouselUrl: '',
        imgCarouselOrder: '',
        status: '1'
      }
      this.dialogVisible = false
      this.getList()
    },
    batchDelete() {
      if (this.multipleSelection.length < 1) {
        return this.$errorMsg('请选择信息')
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let ids = []
          this.multipleSelection.forEach(item => {
            ids.push(item.id)
          })
          delImgData({ ids: ids.join(',') }).then(res => {
            this.$successMsg('删除成功')
            this.hanleReset()
          })
        })
        .catch(() => {})
    }
  },
  components: {
    Pagination,
    ImageUpload
  }
}
</script>
<style scoped>
.el-switch.is-disabled {
  opacity: inherit;
}
.page-header {
  font-size: 18px;
  padding-bottom: 10px;
  font-weight: 600;
}
.cname-footer {
  margin-top: 15px;
}
.my-form {
  width: 60%;
}
</style>
