<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-button @click="add">新增</t-button>
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-"
      >
        <template #image="{ row }">
            <div v-if="row.type==1">
              <img :src="$store.state.user.apiUrl+row.image" style="height: 200px">
            </div>
          <div v-if="row.type==2">
              <video :src="$store.state.user.apiUrl+row.image"  :autoplay="false" controls="controls" style="height: 200px"></video>
          </div>
        </template>
        <template #type="{ row }">
          <t-tag v-if="row.type==1">图片</t-tag>
          <t-tag v-if="row.type==2" theme="primary">视频</t-tag>
        </template>
        <template #select="{ row }">
          <t-space size="24px">
            <t-button theme="warning" @click="edit(row)">编辑</t-button>
            <t-popconfirm content="确认删除吗" @confirm="del(row)">
              <t-button theme="danger">删除</t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
    </div>
    <t-dialog :header="isEdit?'编辑':'新增'" :visible="addMode" :onClose="onCloseMy" @confirm="onSubmit"
              width="45%" top="20px">
      <t-form>
        <t-form-item label="轮播类型" name="type">
          <t-select v-model="addForm.type">
            <t-option label="图片" value="1" />
            <t-option label="视频" value="2" />
          </t-select>
        </t-form-item>
        <t-form-item label="跳转链接" name="url">
          <t-input placeholder="请输入跳转链接" v-model="addForm.url"/>
        </t-form-item>
        <t-form-item label="排序" name="weight">
          <t-input placeholder="请输入排序" v-model="addForm.weight"/>
        </t-form-item>
        <t-form-item label="轮播图片/视频">
          <t-upload
            :action="$store.state.user.apiUrl+'/api/common/upload'"
            v-model="addForm.news_image_show"
            tips="请选择单张图片/视频文件上传"
            accept="image/*,video/*"
            :data="{association_id:this.association.association_id}"
            :showImageFileName="true"
            :format-response="formatResponse"
          ></t-upload>
        </t-form-item>
      </t-form>
    </t-dialog>
  </t-card>

</template>
<script lang="ts">
import store from "@/store";
export default {
  data() {
    return {
      visible: false,
      infoMode: false,
      addForm: {
        type:null,
        image: '',
        news_image_show:[],
        showtime:'',
        weight:0
      },
      addMode: false,
      isEdit: false,
      editID: 0,
      list: [],
      columns: [
        {colKey: 'weight', title: '排序', align: 'center'},
        {colKey: 'image', title: '图片视频', align: 'center'},
        {colKey: 'type', title: '类别', align: 'center'},
        {colKey: 'url', title: '跳转链接', align: 'center'},
        {colKey: 'select', title: '操作', width: 200, align: 'center'},
      ],
      association:{}
    }
  },
  mounted() {
    //this.member_id=this.$route.query.id;
    if(typeof (store.state.user.association)=='object'){
      this.association=store.state.user.association;
    }else{
      this.association=JSON.parse(store.state.user.association);
    }
    this.getList();
  },
  methods: {
    formatResponse(res) {
      console.log(res);
      this.addForm.image = res.data.url;
      return {url: res.data.fullurl,name:res.data.url};
    },
    del(d) {
      console.log(d);
      this.$request
        .post('/carousel/del', {id: d.id})
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    add() {
      this.addMode = true;
      this.isEdit = false;
      this.addForm={
        news_image_show: [],
        image: '',
        url: '',
        weight: '',
        type: null,
      };
    },
    edit(d) {
      console.log(d);
      this.addForm.news_image_show = [{url: store.state.user.apiUrl + d.image,name:d.image}];
      this.addForm.image = d.image;
      this.addForm.id = d.id;
      this.addForm.url = d.url;
      this.addForm.weight = d.weight;
      this.addForm.type = d.type;
      this.addMode = true;
      this.isEdit = true;
    },
    getList() {
      this.$request
        .post("/carousel")
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.list = res.data;
          }

        })
        .catch((e) => {
          console.log(e);
        });
    },
    onSubmit() {
      console.log(this.addForm);
      if (this.addForm.type == null) {
        this.$message.error('轮播图类型不能为空！');
        return;
      }
      if (this.addForm.image=='') {
        this.$message.error('轮播图内容不能为空');
        return;
      }
      var url = '/carousel/add';
      if (this.isEdit) {
        url = '/carousel/update';
      }
      this.$request
        .post(url, this.addForm)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.addMode = false;
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onCloseMy() {
      this.addMode = false;
      this.infoMode = false;
    }
  }
}
</script>
