<template>
  <div class="service">
    <div class="header">
      <div>
        <RadioGroup v-model="form_search.ltype" @on-change="seach">
          <Radio :label="1" :value="1">中文</Radio>
          <Radio :label="2" :value="2">英文</Radio>
        </RadioGroup>
        <Input
          style="width: 200px; margin-left: 20px"
          placeholder="请输入服务名称"
          @on-enter="seach"
          @on-search="seach"
          search
          v-model="form_search.scname"
        />
      </div>
      <Button @click="add" type="primary"> 添加 </Button>
    </div>
    <div>
      <Table border :data="service.list" :columns="columns">
        <template slot-scope="{ row }" slot="scpic">
          <img class="img" v-if="row.scpic" :src="$api.showImageUrl +row.scpic" v-viewer />
        </template>
      </Table>
      <div class="foot_page" v-if="service.total > 0">
        <Page
          :total="service.total"
          @on-change="changePage"
          :current="form_search.page"
          show-total
        ></Page>
      </div>
    </div>
    <!--    添加-->
    <Modal
      v-model="add_form.show"
      class="modal1"
      :mask-closable="false"
      title="添加服务案例"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="AddForm"
        :rules="addFormRules"
        :model="add_form"
      >
        <FormItem label="服务案例" prop="scname">
          <Input v-model="add_form.scname" placeholder="请输入服务案例" />
        </FormItem>
        <FormItem label="序号">
          <Input v-model="add_form.scorder" number placeholder="请输入序号" />
        </FormItem>
        <div class="uploadimg">
          <div class="uploadimg_title">图片</div>
          <div class="upload">
            <Upload
              action
              class="file_left_up"
              accept=".jpg,.jpeg,.png"
              :before-upload="
                (file) => {
                  handleUpload(file);
                  return false;
                }
              "
            >
              <div
                class="upload-img"
                v-if="!this.add_form.scpic"
                style="padding-top: 10px"
              >
                <Icon
                  type="ivu-icon ivu-icon- iconfont icon-shangchuan"
                  size="42"
                  color="#e6e6e6"
                />
                <p
                  class="shangchuan_btn"
                  style="margin-top: 10px; font-size: 14px; text-align: center"
                >
                  上传图片
                </p>
              </div>
              <div v-else>
                <img
                  class="upload-img"
                  :src="$api.showImageUrl + add_form.scpic"
                />
              </div>
            </Upload>
          </div>
        </div>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="add_form.show = false">取消</Button>
        <Button @click="toSaveAdd()" type="primary">保存</Button>
      </div>
    </Modal>
    <!--    修改-->
    <Modal
      v-model="revise_data.show"
      class="modal1"
      :mask-closable="false"
      title="修改服务案例"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="reForm"
        :rules="reviseFormRules"
        :model="revise_data.data"
      >
        <FormItem label="服务案例" prop="scname">
          <Input
            v-model="revise_data.data.scname"
            placeholder="请输入服务案例"
          />
        </FormItem>
        <FormItem label="序号">
          <Input
            v-model="revise_data.data.scorder"
            number
            placeholder="请输入序号"
          />
        </FormItem>
        <div class="uploadimg">
          <div class="uploadimg_title">图片</div>
          <div class="upload">
            <Upload
              action
              class="file_left_up"
              accept=".jpg,.jpeg,.png"
              :before-upload="
                (file) => {
                  handleUpload(file);
                  return false;
                }
              "
            >
              <div
                class="upload-img"
                v-if="!this.revise_data.data.scpic"
                style="padding-top: 10px"
              >
                <Icon
                  type="ivu-icon ivu-icon- iconfont icon-shangchuan"
                  size="42"
                  color="#e6e6e6"
                />
                <p
                  class="shangchuan_btn"
                  style="margin-top: 10px; font-size: 14px; text-align: center"
                >
                  上传图片
                </p>
              </div>
              <div v-else>
                <img
                  class="upload-img"
                  :src="$api.showImageUrl + revise_data.data.scpic"
                />
              </div>
            </Upload>
          </div>
        </div>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="revise_data.show = false">取消</Button>
        <Button @click="revise()" type="primary">保存</Button>
      </div>
    </Modal>
    <!-- 等待窗 -->
    <Spin fix v-if="showLoading" style="background-color: transparent">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </Spin>
  </div>
</template>

<script>
import axios from "axios";
import { sc_list, sc_save, sc_update, sc_remove } from "@/api/index";
import { dateFormat } from "@/utils/index";
export default {
  data() {
    return {
      userInfo: {},
      showLoading: false,
      form_search: {
        page: 1,
        size: 10,
        scname: "",
        ltype: 1 //1中文2英文
      },
      service: {
        total: 0,
        list: []
      },
      columns: [
        {
          title: "序号",
          align: "center",
          key: "scorder",
          width: 70
        },
        {
          title: "服务名称",
          key: "scname",
          align: "center"
        },
        {
          title: "服务地址",
          slot: "scpic",
          align: "center",
          width: 180
        },
        {
          title: "创建人",
          key: "createname",
          align: "center",
          width: 140
        },
        {
          title: "创建时间",
          key: "createtime",
          width: 200,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 150,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    cursor: "pointer"
                  },
                  class: "theme_color",
                  on: {
                    click: () => {
                      this.$refs["reForm"].resetFields();
                      this.revise_data = {
                        show: true,
                        data: params.row
                      };
                    }
                  }
                },
                "修改"
              ),
              h(
                "span",
                {
                  style: {
                    margin: "0 10px"
                  },
                  class: "theme_color"
                },
                "|"
              ),
              h(
                "span",
                {
                  style: {
                    cursor: "pointer"
                  },
                  class: "red",
                  on: {
                    click: () => {
                      let content = "您确定要删除吗？";
                      this.$Modal.confirm({
                        title: "提示",
                        content: content,
                        onOk: () => {
                          this.del(params.row);
                        },
                        onCancel: () => {}
                      });
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ], //列表表格
      add_form: {
        show: false,
        scname: "",
        scpic: "",
        scorder: 0
      },
      revise_data: {
        show: false,
        data: {}
      },
      reviseFormRules: {
        scname: [
          {
            required: true,
            message: "服务名称不能为空",
            trigger: "blur"
          }
        ],
        scorder: [
          {
            required: true,
            message: "序号不能为空",
            trigger: "blur"
          }
        ]
      },
      addFormRules: {
        scname: [
          {
            required: true,
            message: "服务名称不能为空",
            trigger: "blur"
          }
        ],
        scorder: [
          {
            required: true,
            message: "序号不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("xhWebAdminUser"));
    this.init();
  },
  methods: {
    seach() {
      this.form_search.page = 1;
      this.init();
    },
    init() {
      sc_list(this.form_search).then((res) => {
        if (res.code == 0) {
          this.service.list = res.obj.list.map((v) => {
            v.createtime = dateFormat(v.createtime);
            return v;
          });
          this.service.total = res.obj.total;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    add() {
      this.$refs["AddForm"].resetFields();
      this.add_form.show = true;
      this.add_form.scorder = this.service.total + 1;
    },
    revise() {
      this.$refs["reForm"].validate((valid) => {
        if (valid) {
          if (!this.revise_data.data.scpic) {
            this.$Message.error("请上传图片");
            return false;
          }
          sc_update({
            scname: this.revise_data.data.scname,
            scpic: this.revise_data.data.scpic,
            scorder: this.revise_data.data.scorder,
            scid: this.revise_data.data.scid
          }).then((res) => {
            if (res.code == 0) {
              this.revise_data.show = false;
              this.$Message.success(res.msg);
              this.init();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    del(data) {
      sc_remove({ scid: data.scid }).then((res) => {
        if (res.code == 0) {
          if (this.form_search.page != 1 && this.service.list.length == 1) {
            this.form_search.page--;
          }
          this.init();
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    //确定添加
    toSaveAdd() {
      this.$refs["AddForm"].validate((valid) => {
        if (valid) {
          if (!this.add_form.scpic) {
            this.$Message.error("请上传图片");
            return false;
          }
          sc_save({
            scname: this.add_form.scname,
            scpic: this.add_form.scpic,
            ltype: this.form_search.ltype,
            scorder: this.add_form.scorder,
            createid: this.userInfo.userid
          }).then((res) => {
            if (res.code == 0) {
              this.add_form.show = false;
              this.add_form.scname = "";
              this.add_form.scpic = "";
              this.init();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    handleUpload(file) {
      let that = this;
      let size = file.size / 1024 / 1024;
      if (!file.name) {
        return;
      }
      let str = file.name.split(".");
      let suffix = str[str.length - 1];
      if (suffix !== "png" && suffix !== "jpg" && suffix !== "jpeg") {
        this.$Message.error("请上传png、jpg、jpeg类型的文件");
        return false;
      }
      if (size > 10) {
        this.$Message.error("图片太大，不能超过10M！");
        return false;
      }
      let formData = new FormData();
      formData.append("file", file);
      formData.append("savefolder", "servicecase");
      let url = that.$api.baseUrl + "file/upload";
      that.showLoading = true;
      axios
        .post(url, formData, {
          timeout: 1000 * window._config.axiosFileTimeout
        })
        .then((res) => {
          that.showLoading = false;
          if (res.data.code === 0) {
            if (this.revise_data.show) {
              //修改
              that.revise_data.data.scpic = res.data.obj;
            } else {
              //添加
              that.add_form.scpic = res.data.obj;
              that.init();
            }
          } else {
            that.$Message.error("图片上传失败");
          }
        })
        .catch(() => {
          that.showLoading = false;
          that.$Message.error("图片上传失败");
        });
    },
    changePage(page) {
      this.form_search.page = page;
      this.init();
    }
  }
};
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
/deep/ .theme_color {
  color: #2d8cf0;
}
/deep/ .red {
  color: red;
}
.img {
  width: 60px;
  height: 60px;
  cursor: pointer;
  margin-top: 5px;
}
.upload {
  width: 200px;
  height: 100px;
  border: 1px solid #dcdee2;
  box-sizing: border-box;
  cursor: pointer;
  &:hover {
    color: #2d8cf0;
    border: 1px solid #2d8cf0;
    .upload-img,
    .icon-shangchuan,
    .shangchuan_btn {
      color: inherit !important;
    }
  }
  .upload-img {
    width: 198px;
    height: 98px;
    text-align: center;
    object-fit: cover;
  }
}
.uploadimg {
  display: flex;
  .uploadimg_title {
    width: 90px;
    text-align: right;
    padding-right: 10px;
  }
}
</style>
